Manage website content in AnQiCMS, the ultimate goal is to be able to present these contents elegantly and efficiently to visitors.For this most common content type of articles, how to accurately display its title and body in front-end templates is a basic skill that every website operator needs to master.AnQiCMS powerful template function, providing us with a flexible and intuitive implementation method.

Core: UnderstandingarchiveDetailtags

AnQiCMS's template system is designed very user-friendly, it provides a special function for retrieving detailed data of a single articlearchiveDetailLabel. When you visit a detailed article page, this label will intelligently recognize the article on the current page and allow you to extract the required information from it.

Its basic usage form is like this:{% archiveDetail 变量名称 with name="字段名称" %}Of course, if you just want to output a certain field directly, you can omit it变量名称For example,{% archiveDetail with name="Title" %}It will directly output the title of the current article.

How to display the article title

The article title is undoubtedly the core element of the page, and it is very simple to display it in the AnQiCMS template.archiveDetailtag provides a name ofTitlefield is specifically used to obtain the article title.

in the article detail page template (usually{模型table}/detail.html), you can display the article title like this:

<h1>{% archiveDetail with name="Title" %}</h1>

This line of code will directly insert the title of the current article into<h1>the tag.

You may also find that, in the article detail page, you can use directly{{archive.Title}}Also, the title can be displayed. This is because in the context of the article detail page, AnQiCMS will automatically encapsulate the complete data of the current article into a namearchiveThe global variable of. Therefore,{{archive.Title}}and{% archiveDetail with name="Title" %}can all achieve the purpose of displaying the title. Usually, in order to be concise and directly access the properties of the current document, people are more inclined to use{{archive.Title}}this form.

How to display article content

The article content is the main part of the page, including detailed information, images, layout, etc. In AnQiCMS, the content is stored inContentin the field.

To display the article content, we can usearchiveDetailTagsContentFields:

<div>{% archiveDetail with name="Content" %}</div>

However, directly outputting this way might encounter a problem: AnQiCMS defaults to escaping all HTML tags outputted in templates to prevent potential XSS attacks.This means that if you use bold, images, links, and other HTML tags in the article content, they will be displayed as plain text, rather than being parsed by the browser into the intended styles.

To render the HTML content correctly, we need to use a special filter—safe.safeThe role of the filter is to inform the template engine that this content is 'safe' and does not need to be HTML escaped, and can be output directly. Therefore, the recommended way to display the article content is:

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

Here we directly usearchiveglobal variables, and through|safea filter to ensure that HTML content can be parsed correctly. Please remember|safeThe importance of filters, as it directly affects the presentation of the article layout.

Additionally, if your article content is written using a Markdown editor and you want to render it as HTML on the front end,archiveDetailtag.render=trueParameters:

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

So, Markdown syntax will be correctly parsed into HTML and displayed. If you need to optimize the lazy loading of images in the content, you can also combinelazy="data-src"参数，让模板在输出图片URL时自动替换src属性，以配合前端的懒加载脚本。

Comprehensive Application Examples

Combine the title and content, usually a template fragment of an article detail page will include the following similar code structure, and also display other basic information of the article, such as the publication time, category, and page views: 

<article class="article-detail">
    <h1 class="article-title">{{ archive.Title }}</h1>
    <div class="article-meta">
        <span class="category">分类：<a href="{{ archive.Category.Link }}">{{ archive.Category.Title }}</a></span>
        <span class="publish-date">发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span class="views">阅读量：{{ archive.Views }}</span>
    </div>
    <div class="article-content">
        {{ archive.Content|safe }}
    </div>
</article>

In this example, we directly usearchiveglobal variables to access the various fields of the article, and throughstampToDatetags to format the timestamp into a readable date,archive.CategoryThis is an object, which can directly access the category links and titles. This method is concise and clear, and can efficiently build the article detail page.

Through these flexible tags and filters, AnQiCMS makes the display of website content intuitive and powerful. Whether you want to display simple articles or complex product details, you can do so with ease.

Frequently Asked Questions (FAQ)

Q1: Why do I only write{{archive.Title}}can also display the title instead of having to use{% archiveDetail with name="Title" %}?

A1: In the article detail page of AnQiCMS, the system will automatically wrap all the data of the current article into a global variable namedarchive. Therefore, you can directly access{{archive.Title}}to access the article title, this method is usually more concise.{% archiveDetail with name="Title" %}Tags are more commonly used on non-article detail pages (such as the homepage, list page) when you need to retrieve specific article information based on a specified ID or alias, or when you want to use the parameters of the tag (such asrender/lazyWhen fine control is required (e.g.)... Both are effective in displaying the title in the context of the article detail page.

Q2:|safeWhat is the role of the filter? Is it safe to use?

A2:|safeThe filter is an important feature of AnQiCMS template engine, its role is to inform the template engine that the processed string content is safe HTML code and does not require default HTML entity escaping. This means that if you include such as<b>/<p>/<img>English HTML tags, use|safeAfter the filter, these tags will be correctly parsed and rendered by the browser, rather than displayed as plain text.

Regarding security,|safeThe filter itself does not verify the security of HTML content.It is just “trust” that the content you provide is safe.|safeIt may cause security vulnerabilities. Therefore, when using|safeBefore using it, please ensure that your content source is reliable, or that the content has been fully secured before being saved to the database.

Q3: How do I display the summary of an article instead of the full content?

A3: AnQiCMS provides a "Document Summary" field in article management, which is usually used to display the article abstract. In the template, you can{{archive.Description}}Get and display this summary content.If the 'Document Summary' field is empty, the system will usually automatically extract the first 150 words from the article content as the summary.{{archive.Content|truncatewords:50}}The first 50 words of the article can be extracted as a summary, and an ellipsis will be automatically added at the end.