In AnQi CMS, whether it is to display the detailed content of a single article or to present the article title and summary on the list page, it all benefits from its flexible and easy-to-understand template tag system.AnQiCMS uses syntax similar to Django template engine, making content calls intuitive and efficient.

Template Basics: The Bridge of Content Presentation

In AnQiCMS, you will find that all template files are named with.htmlsuffix, and stored uniformly in the template folder you choose (for example/template/default/）中。Template engine's core lies in two types of markers:

  • Double curly braces{{ 变量名 }}：Used to directly output the content of variables.
  • Single curly braces and percentage signs{% 标签名 参数 %}：Used to implement logical control, such as conditional judgment (if/else), loop (for), and calling various built-in function tags.

Understood these two basic tags, we can then start to explore how to display the title and content of articles in the AnQiCMS template.

Display the title and content of a single article (details page)

When you visit the details page of a specific article (for examplearticle/123.html），AnQiCMS will intelligently provide all information of the current article asarchivethe object to the template. This means you can directly access various attributes of the article througharchivethe object.

To display the article title, you can use the following method:

<h1>{{ archive.Title }}</h1>

To display the detailed content of an article, the content usually includes HTML tags (such as paragraphs, images, bold text, etc.). To ensure that these HTML tags are correctly parsed by the browser rather than displayed as plain text, we need to use|safeFilter:

<div class="article-content">
    {{ archive.Content|safe }}
</div>

|safeThe filter tells the template engine that this content is safe HTML code and can be output directly without escaping. If your article content is written using a Markdown editor and you want it to be rendered as HTML on the front end, you can also explicitly userender=trueParameters:

<div class="article-content">
    {% archiveDetail archiveContent with name="Content" render=true %}{{ archiveContent|safe }}
</div>

Additionally, you can also usearchiveDetailtags to finely control the display of content, or call the content of the specified ID at other locations on non-article detail pages:

{# 在文章详情页，直接使用即可 #}
<h1>{% archiveDetail with name="Title" %}</h1>
<p>发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</p>
<div class="article-body">
    {% archiveDetail articleFullContent with name="Content" lazy="data-src" %}{{ articleFullContent|safe }}
</div>

{# 在其他页面调用ID为1的文章标题和内容 #}
<h2>{% archiveDetail with name="Title" id="1" %}</h2>
<p>{% archiveDetail with name="Description" id="1" %}</p>

In the above example,stampToDateThe label is used to format the Unix timestamp of the article into a readable date,lazy="data-src"It is a parameter for lazy loading images in the content to make the image loading more optimized.

Display the title and summary of articles in the article list (list page)

In the article list page (such as category list page or search results page), we usually display a brief information of multiple articles, such as title, abstract and link, rather than the full content of the article. AnQiCMS providesarchiveListLabel to achieve this requirement.

archiveListLabels allow you to get a list of articles based on various conditions such as categories, modules, and recommended attributes. After getting the list of articles, you need to useforLoop to iterate through each article.

Here is a common usage to display the title, link, and summary of the article list:

<ul class="article-list">
    {% archiveList articles with type="page" moduleId="1" limit="10" %} {# 获取文章模型ID为1，每页10条的列表 #}
        {% for item in articles %}
            <li>
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p class="summary">{{ item.Description }}</p>
                <span class="date">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            </li>
        {% empty %}
            <li>暂无文章可显示。</li>
        {% endfor %}
    {% endarchiveList %}
</ul>

In this example:

  • archiveListthe label.articlescollection of articles.type="page"indicates that this is a paginated list,moduleId="1"Identified the model ID of the article.limit="10"Limited the number of articles displayed per page.
  • {% for item in articles %}The loop traversedarticlesCollected each article in the set, and named the current article object.item.
  • {{ item.Link }}/{{ item.Title }}and{{ item.Description }}Used to output the link, title, and automatically generated summary of the article.
  • {% empty %}The block will bearticlesDisplayed when the collection is empty, providing a friendly user prompt.
  • stampToDate(item.CreatedTime, "2006-01-02")Used to format the creation time of the article as well.

Through the combination of these tags, you can flexibly and efficiently display various article content in the AnQiCMS template, meeting the display needs of different pages.Master these basic usages, and it will make your website content operation twice as effective.

Common Questions (FAQ)

  1. Why am I directly outputting in the template?{{ archive.Content }}The HTML tags in the article content were not parsed, but displayed as is?This is because AnQiCMS template engine, for security considerations, defaults to escaping all output content as HTML entities. If you confirm that the content is safe HTML code, you need to use|safeFilter to indicate that the template engine should skip escaping, for example{{ archive.Content|safe }}.

  2. How to display only a brief summary of the article on the article list page instead of the full article content?On the article list page, you can use{{ item.Description }}to display the summary of the article.DescriptionThe field is usually automatically extracted by the system from the article content at the time of publishing the article, or manually filled in by the editor. If you need to customize the length of the abstract, you can usetruncatecharsortruncatewordsThe filter performs truncation processing.

  3. If I have an article ID but it is not on the article detail page, how can I call the title and content of this specific article?You can usearchiveDetailLabel and pass inidTo specify the article ID, use the parameter, for example{% archiveDetail articleData with name="Title" id="文章ID" %}{{ articleData }}Get the title, or{% archiveDetail articleContent with name="Content" id="文章ID" %}{{ articleContent|safe }}Get and display the content.