How to display the content of custom fields (such as author, source) on the article detail page?

In website operation, the article detail page is not only a place to display core content, but also a key to convey additional information, enhance professionalism and user experience.In addition to the title and text, we often need to display some custom fields on the article detail page, such as author, source, publisher, product model, etc.This information not only enriches the content of the article, but also helps to enhance the authority and credibility of the website, even having a positive impact on SEO optimization and user decision-making.

AnQiCMS (AnQiCMS) with its flexible content model design makes the display of such custom fields very intuitive and powerful.No matter if your website is a corporate website, a self-media blog, or an e-commerce product display, it can easily meet personalized content display needs.

Flexiblely define your custom fields

In AnQi CMS, to display custom fields, you first need to define them in the background.This is thanks to the flexible content model feature provided by Anqi CMS.You can create or modify the corresponding content model based on different content types (such as articles, products, events, etc.)

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

When adding custom fields, you can set the "parameter name" (this is the Chinese name displayed to the backend editors, such as "article author"), as well as the "call field" (this is the English name used when calling it in the template, such as 添加自定义字段时，你可以设置“参数名”（这是显示给后台编辑人员看的中文名称，比如“文章作者”），以及“调用字段”（这是在模板中调用时使用的英文名称，比如 添加自定义字段时，你可以设置“参数名”（这是显示给后台编辑人员看的中文名称，比如“文章作者”），以及“调用字段”（这是在模板中调用时使用的英文名称，比如author）。Even better, AnQi CMS supports various field types, such as single-line text, numbers, multi-line text, single selection, multiple selection, and dropdown selection.These rich choices can meet almost all your content structure needs.For example, the author usually chooses 'single-line text', and the source of the article is the same.If you need to display some complex descriptions, such as product features, you can choose 'Multiline text' even enable Markdown editor to provide richer formatting.

Prepare article detail page template

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

The template syntax of Anqi CMS borrows from the Django template engine, using double curly braces{{变量}}To output variable content, use single curly braces and percentages{% 标签 %}Come to process logic and call data. Understanding these basic rules, we can 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 named custom field

If your custom field has already been set with a clear 'reference field' name (such asauthor/source), then you can directly usearchiveDetailthe tag or through the current document objectarchiveThe direct way to call it.

Suppose you added two custom fields for the "article model" in the background, their "call fields" are respectively.author(author), andsource(Source), and you filled in the content when you published the article. Thendetail.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 the custom field, 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 one{% if archive.author %}The judgment, it is a good habit because not all articles will fill in all custom fields, which can prevent unnecessary labels from being displayed when fields are empty.

If your custom field is of 'Multiline text' type and you have set it to support Markdown editing in the backend content model, then when displaying in the template, you need to use|render|safea filter. For example:{{archive.custom_markdown_field|render|safe}}If it is just simple HTML rich text content,|safeit is enough.

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

In some scenarios, you may want to dynamically display all the custom parameters of an article in list form, such as a product detail page's 'product parameters' list, where you may not know in advance what parameters will be present. At this time,archiveParamsTags make it very convenient.

archiveParamsTags can retrieve all custom fields and their values of the current article (or a specified ID article) and return them as an iterable 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>

By{% for item in params %}Loop, you can display the names and values 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 part of the custom fields, or need to handle some fields specially, 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

AnQi CMS makes it very simple to display custom fields on article detail pages with its flexible content model and intuitive template tags.Whether you directly refer to a specific field or dynamically traverse all parameters, you can always find an appropriate implementation.Reasonably utilize these features, not only can it greatly enrich your website content, but also provide visitors with a more comprehensive and professional reading experience.

Frequently Asked Questions (FAQ)

1. Why doesn't the custom field I added in the background and filled in content show on the front page of the article details?

First, make sure that your custom field is correctly defined in the \ Next, check if the custom field you are using is defined correctly in the content model and ensure that there are no spelling errors in the field name. Additionally, verify that you have configured the template for the article detail page (usually Lastly, ensure that your custom field is properly defined in the content model and double-check the spelling of the field name. Also, make sure that the template for the article detail page (usually In conclusion, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Furthermore, confirm that the template for the article detail page (usually Remember to make sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Also, don't forget to confirm that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, ensure that the template for the article detail page (usually To proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually In summary, ensure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually It is important to note that your custom field should be correctly defined in the content model and that the field name is spelled correctly. Moreover, ensure that the template for the article detail page (usually Please ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Additionally, confirm that the template for the article detail page (usually Ensure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually To finalize, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually To complete, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please ensure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually To finalize, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually To complete, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please ensure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually To finalize, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually To complete, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please ensure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually To finalize, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually To complete, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please ensure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually To finalize, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually To complete, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please ensure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually To finalize, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually To complete, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please ensure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually To finalize, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually To complete, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please ensure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually To finalize, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please make sure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to proceed, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, make sure that the template for the article detail page (usually To complete, ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Moreover, confirm that the template for the article detail page (usually Please ensure that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, verify that the template for the article detail page (usually Be sure that your custom field is properly defined in the content model and that the field name is spelled correctly. Furthermore, ensure that the template for the article detail page (usually Ensure that your custom field is accurately defined in the content model and that the field name is spelled correctly. Additionally, make sure that the template for the article detail page (usually In order to continue, verify that your custom field is correctly defined in the content model and that the field name is spelled correctly. Also, ensure that the template for the article detail page (usually{模型table}/detail.htmlUsed the correct template tags to call these fields, for example{% archiveDetail with name="你的调用字段名" %}Or{{archive.你的调用字段名}}Remember to add if the field content may be empty{% if ... %}Determine, to prevent from not displaying. Finally, check whether 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 types of custom fields are there? What are the differences in how different types are displayed in the template?

The AnQi CMS supports various custom field types, including single-line text, numbers, multi-line text, single selection, multiple selection, and dropdown selection.

• Single-line text/numberDirectly output its value.
• Multi-line textIf it contains newline characters or HTML content, it is recommended to use|safeThe filter renders in the correct format. If the Markdown editor is enabled on the backend and Markdown formatting is used, then it is necessary|render|safefilter.
• Single choice/Multiple choice/Dropdown choiceThese fields' values are usually selected by users and can be directly output. 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.

3. How can I make my custom field content support rich text editors or Markdown format like the main content of an article?

When adding or editing custom fields in the background "Content Model", you can choose whether to enable the rich text editor or Markdown editor for "multi-line text" fields.After enabling, this field will have the corresponding editing function during backend editing.When displaying the content of such custom fields in the front-end template, in order to correctly parse and render these formats, you need to use|safeFilter (for HTML rich text content) or|render|safeFilter (for Markdown content),