Manage website content in Anqi CMS, the article detail page is an important window for visitors to display core information.Whether it is corporate news, product introduction, or technical articles, clearly presenting the title and detailed content is the key to enhancing user experience and information communication efficiency.AutoCMS provides intuitive and powerful template tags, making content presentation easy and flexible.

Understand the template structure of the Anqi CMS.

The template files of Anqi CMS are usually stored in:/templateIn the directory, and follow a set of simple naming conventions. For detail pages of documents such as articles or products,{模型table}/detail.htmlEnglish translation: For example, if your content model is 'article', the detail page template may bearticle/detail.html.

In these template files, you will find that content display is mainly achieved in two ways: using double curly braces{{变量}}to directly output data, as well as using single curly braces and the percent sign{% 标签 %}Handle logic or call functional tags. When you visit a detailed article page, Safe CMS will automatically load all the data of the current article into a namedarchiveThe global variable, which makes it very convenient to obtain article information.

Get and display the article title

The article title is the 'facade' of the content, which is usually used as the main title of the page.<h1>）and the title of the browser tab.

The most direct way to display the article title is to accessarchivein the variableTitleFields:

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

This line of code will directly output the current article title.

Additionally, in order to optimize the search engine (SEO) effect, the page's browser tab title (<title>标签）usually need to include the article title, and may also include the website name. At this time, you can use the Anqi CMS providedtdkTags:

<title>{% tdk with name="Title" siteName=true %}</title>

this code will intelligently obtain the current article title and according tositeName=trueThe setting, automatically adds your website name after the title to enhance the professionalism and SEO-friendliness of the page. You can also throughsepParameters customize the separator between title and website name.

Get and display the detailed content of the article.

The detailed content of the article is where users obtain core information, which may contain rich text, images, even videos and code. Anqi CMS will store this rich text content inContentfield in.

To display the detailed content of the article on the page, you can call it like this:

<div>{{archive.Content|safe}}</div>

There is a very important detail here:|safeFilter. Since the article content is usually edited through a rich text editor, it may contain HTML tags (such as<p>,<img>,<strong>auto. By default, to prevent cross-site scripting (XSS) attacks, the security CMS template engine will escape all output content, which means<p>May be displayed as&lt;p&gt;，caused the content to be displayed as raw code rather than formatted style.

Use|safeThe filter explicitly tells the template engine that this part of the content is 'safe' and does not require escaping, so that the browser can correctly parse and display the formatted article content.

If your article content is written using a Markdown editor and you want the front end to automatically convert it to HTML rendering, you canarchiveDetailtag.render=trueParameters. At the same time, if the article contains images and you want to implement lazy loading of images, you can make use oflazy="data-src"parameters in conjunction with the front-end lazy loading library.

{# 使用archiveDetail标签的完整示例，并考虑Markdown渲染和图片懒加载 #}
<div>
    {% archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
    {{articleContent|safe}}
</div>

Integrate more article information

An article detail page is usually not just a title and content.You may also need to display auxiliary information such as publication time, views, and article description.archivevariables.

The following is a comprehensive example showing how to display the title, content, publish time, view count, and article description on the article detail page:

`html {% extends 'base.html' %} {# Inherit base layout to ensure consistency of page structure #}

{% block title %}

{# 浏览器标签页标题，包含文章标题和网站名称 #}
<title>{% tdk with name="Title" siteName=true %}</title>

{% endblock %}

{% block content %}

{# 主标题，通常为文章标题 #}
<h1 class="article-title">{{archive.Title}}</h1>

<div class="article-meta">
    {# 显示发布时间，使用stampToDate过滤器格式化为可读日期 #}
    <span class="publish-time">发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
    {# 显示浏览量 #}
    <span class="views">浏览量：{{archive.Views}} 次</span>
    {# 显示文章描述（如果存在） #}
    {% if archive.Description %}
    <p class="article-description">{{archive.Description}}</p>
    {% endif %}
</div>

<div class="article-content">
    {# 显示文章详细内容，使用safe过滤器确保HTML