How to display the title and content of articles in AnQiCMS templates?

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

Core: RecognitionarchiveDetailTag

The AnQiCMS template system is designed very user-friendly, it provides a special function for getting detailed data of a single articlearchiveDetailLabel. When you visit an article detail 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 as follows:{% archiveDetail 变量名称 with name="字段名称" %}Of course, if you just want to output a 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, displaying it is very simple in the AnQiCMS template.archiveDetailthe label provides a namedTitleThe field is specifically used to retrieve the article title.

In the template of the article detail page (usually){模型table}/detail.htmlIn the parenthesis, 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>in the tag.

You may also find that on the article detail page, you can use it directly{{archive.Title}}The title can also be displayed. This is because in the context environment of the article detail page, AnQiCMS will automatically encapsulate the complete data of the current article into a name calledarchiveThe global variable is. 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 tend to use{{archive.Title}}this form.

How to display article content

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

We can use it to display article contentarchiveDetaillabel'sContentField:

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

However, simply outputting it directly may encounter a problem: AnQiCMS defaults to escaping all HTML tags output from 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 HTML content correctly, we need to use a special filtersafe.safeThe filter's role is to inform the template engine that this content is 'safe', and it does not need to be HTML-escaped. It can be output directly. Therefore, the recommended way to display article content is:

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

Here we directly usedarchiveGlobal variables, and through|safeThe filter ensures that HTML content can be parsed correctly. Please remember to do so.|safeThe importance of the filter, as it directly affects the presentation of the article layout.

Additionally, if the content of your article is written using a Markdown editor and you want to render it into HTML on the front end, you canarchiveDetailthe tag withrender=trueparameters:

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

This, Markdown syntax will be correctly parsed into HTML and displayed. If you need to optimize lazy loading of images in the content, you can combinelazy="data-src"The parameter allows the template to automatically replace the image URL in outputsrcProperty, to cooperate with the front-end lazy loading script.

Comprehensive Application Example

Combine the title and content, usually a template snippet of an article detail page will contain 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 usedarchiveglobal variables to access the various fields of the article, and bystampToDatetags to format the timestamp into a readable date,archive.CategoryThis is an object that can be directly accessed to view 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 show simple articles or complex product details, you can do it with ease.

Frequently Asked Questions (FAQ)

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

A1: On the AnQiCMS article detail page, the system will automatically encapsulate all the data of the current article into a global variable namedarchive. Therefore, you can directly access{{archive.Title}}In this way to access the article title, this method is usually more concise.{% archiveDetail with name="Title" %}Tags are more 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 tag parameters (such asrender/lazyWhen making more fine-grained controls. But in the context of the article detail page, both can effectively display the title.

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

A2:|safeThe filter is an important feature of the 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>Use HTML tags,|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 safety of HTML content.It is just 'trust' that the content you provide is safe. If the content of your article comes from untrusted user input (such as users directly inputting HTML in the comments), and it has not been strictly filtered for XSS (cross-site scripting attacks), then use it directly|safeIt could lead to a security vulnerability. Therefore, before using|safeMake sure the source of your content is reliable or that the content has been thoroughly filtered for security before saving it to the database.

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

A3: AnQiCMS provides a 'Document Summary' field in the article management, which is usually used to display the article abstract. In the template, you can use the{{archive.Description}}To retrieve and display this summary content. If the 'Document Summary' field is empty, the system will usually automatically extract the first 150 characters from the article content as a summary.Moreover, if you need more flexibility in extracting article content as a summary, you can use the filters provided by the template, for example{{archive.Content|truncatewords:50}}You can extract the first 50 words of the article content as a summary and automatically add an ellipsis at the end.