How to display article title and content in AnQiCMS template?

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

Basic template: the bridge of content presentation

In AnQiCMS, you will find that all template files are suffixed with.htmland are uniformly stored in the template folder you choose (for example/template/default/The core of the template engine lies in two types of markers:

• double curly braces{{ 变量名 }}Used to directly output the content of variables.
• single curly braces and percent signs{% 标签名 参数 %}: Used to implement logical control, such as conditional judgments (if/else), loops (for), and calling various built-in functional 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 the information of the current article asarchivean object to the template. This means you can directly accessarchivevarious properties of the article through the object.

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

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

And to display the detailed content of an article, the content usually includes HTML tags (such as paragraphs, images, bold, etc.), in order to ensure that these HTML tags are parsed correctly 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 was 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>

In addition, you can also utilizearchiveDetailTag to control the display of content more finely, or to 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,stampToDateTags are used to format the Unix timestamp of an article into a readable date,lazy="data-src"It is a parameter for lazy loading images in the content, making image loading more optimized.

Show the title and summary of the article list (list page)

On the article list page (for example, the category list page or search results page), we usually display brief information about multiple articles, such as titles, abstracts, and links, rather than the full content of the articles. AnQiCMS providesarchiveListTag to achieve this requirement.

archiveListTags allow you to get a list of articles based on various conditions such as categories, modules, and recommended attributes. After obtaining the list of articles, you need to usefora loop to iterate over each article.

The following is a common usage to display a list of article titles, links, and summaries:

<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:

• archiveListA label has obtained a namedarticlescollection of articles.type="page"indicates that this is a paginated list,moduleId="1"specifies the model ID of the article,limit="10"It limited the number of articles displayed per page.
• {% for item in articles %}Looped througharticlesEach article in the collection, and the current article object is named.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 bearticlesThe collection is displayed when empty, providing a friendly user prompt.
• stampToDate(item.CreatedTime, "2006-01-02")Also used to format the creation time of the article.

By combining these tags, you can flexibly and efficiently display various article content in the AnQiCMS template, meeting the display needs of different pages.Mastering these basic usages will make your website content management twice as efficient.

Frequently Asked Questions (FAQ)

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

2. How to display a brief summary of the article on the article list page instead of the full article content?You can use it on the article list page:{{ item.Description }}To display the summary of the article.DescriptionFields are typically automatically extracted by the system from the article content at the time of publishing or manually filled in by the editor. If you need to customize the length of the summary, you can usetruncatecharsortruncatewordsFiltering is performed.

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 in.idSpecify the article ID with parameters, for example{% archiveDetail articleData with name="Title" id="文章ID" %}{{ articleData }}To get the title, or{% archiveDetail articleContent with name="Content" id="文章ID" %}{{ articleContent|safe }}To get and display the content.