In website operations, the article detail page is not only a place to display core content, but also a key to convey additional information, enhance professionalism, and improve user experience.In addition to the title and body, 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) is designed with a flexible content model that makes the display of these custom fields very intuitive and powerful.No matter what your website is, whether it's an enterprise official website, a self-media blog, or an e-commerce product display, it can easily achieve 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 due 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.)

Go to the back end and find the 'Content Model' option under 'Content Management'.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 in the template, such as author)。Even better, AnQi CMS supports various field types such as single-line text, numbers, multi-line text, single choice, multiple choice, and drop-down selection.These rich choices can meet almost all your content structure needs.For example, 'author' usually chooses 'single-line text', and the 'source of the article' is the same as well.If you need to display some complex descriptions, such as product features, you can choose 'Multi-line text' or even enable the Markdown editor to provide richer formatting.

Prepare the article detail page template

Once custom fields are defined and filled in the background, the next step is to display them on the website's article detail page. The template files of 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 draws on Django's template engine, using double curly braces{{变量}}To output variable content, use single curly braces and percentages{% 标签 %}Come to handle 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 custom fields with known names

If your custom field has already been set with a clear "call field" name (such asauthor/source), then you can directly usearchiveDetaila tag or through the current document objectarchiveIt is the most direct way to call.

Suppose you have added two custom fields in the background for the "article model", and their "call fields" areauthor(author), andsource(Source), and you filled in the content when you published the article. Then indetail.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 byarchiveThe object accesses the custom field directly, 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 avoid unnecessary labels being displayed when fields are empty.

If your custom field is of the '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 a list, such as a product detail page's 'product parameters' list, where you may not know in advance what parameters will be available. At this point,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 in the form of 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 each custom field name and value 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 makes it very simple to display custom fields on the article detail page 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 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.

Frequently Asked Questions (FAQ)

1. I added a custom field and filled in the content in the background, why doesn't the article detail page on the front display?

First, make sure that your custom field is properly defined in the "content model" and that the name of the "call field" is spelled correctly. Second, confirm that you have already set up the template for the article detail page, which is usually{模型table}/detail.htmlThe field name is correctly used in the template tag, for example{% archiveDetail with name="你的调用字段名" %}Or{{archive.你的调用字段名}}Remember to add if the field content may be empty{% if ... %}Determine, to prevent it 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 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 choice, multiple choice, and dropdown selection.

  • Single-line text/numberDirectly output its value.
  • Multi-line textIf it contains line breaks or HTML content, it is recommended to use|safeThe filter renders correctly. 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 typically the text selected by the user, which can be output directly. If it is a multi-select type, the output may be a string or 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 article body?

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 "Multiline text" fields.After enabling, the 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),