How to obtain and display the title and detailed content on the article detail page?

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

Understand the template structure of AnQi CMS

The template files of AnQi CMS are usually stored in/templateUnder the directory, following a set of concise naming conventions. For the detail pages of articles or product documents, the default template file is usually{模型table}/detail.htmlFor example, if your content model is "article", then the detail page template might bearticle/detail.html.

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

Retrieve and display the article title

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

The most direct way to display the article title is to accessarchiveIn variables,TitleField:

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

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

In addition, to optimize the search engine (SEO) effect, the browser tab title of the page (<title>Labels 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 retrieve the title of the current article and according tositeName=trueThe setting, automatically adds your website name after the title, thus enhancing the professionalism and SEO friendliness of the page. You can also usesepThe separator between the custom title and the 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 inContentin the field.

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 article content is usually edited through a rich text editor, it may contain HTML tags such as<p>,<img>,<strong>and).By default, to prevent cross-site scripting (XSS) attacks, the Anqi CMS template engine will escape all output content, which means<p>May be displayed as<p>Causes the content to be displayed as raw code instead of formatted style.

Use|safeThe filter explicitly tells the template engine that this part of the content is 'safe', and does not need to be escaped, so that the browser can correctly parse and display the well-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 canarchiveDetailthe tag withrender=trueparameters. At the same time, if the article contains images and you want to implement lazy loading of images, you can uselazy="data-src"these 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

A complete article detail page usually is not just the title and content.You may also need to display auxiliary information such as the release time, views, and article description.This data can also be directly fromarchivefrom the variable.

The following is a comprehensive example of how to combine display of title, content, publication time, page views, and article description on an article detail page:

`html {% extends 'base.html' %} {# Inherit the basic layout to ensure consistency of the 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