How to correctly call and display the title and content of the article in the template?

When using AnQiCMS to build and manage websites, the title and content of articles are core elements. Their correct invocation and display are directly related to the visual presentation, user experience, and search engine optimization of the website.Understanding how to efficiently and accurately process this information in AnQiCMS templates is the key to website content operation and template customization.

AnQiCMS template system uses syntax similar to Django template engine, which provides great flexibility and customizability for content display. In the template, you will find that variables are usually enclosed in double curly braces{{变量}}represented, while control logic (such as conditional judgments, loops, etc.) uses single curly braces and percent signs{% 标签 %}defined.

AnQiCMS template overview

In AnQiCMS, all template files are stored in/templatethe directory, and.htmlSuffix. When you need to call the title and content of the article, first make sure you are editing the correct template file, such as the article detail page usually corresponds to{模型table}/detail.htmlor customizeddetail.htmlThe template file uses UTF-8 encoding to avoid garbled text issues.

Invoke article title

The article title is the 'facade' of the content, and it has an important display position on both the list page and the detail page.

ForArticle detail pageThe system usually loads all the data of the current article based on the URL, you can directly access the global variablearchiveVisit the various properties of the article. Therefore, the most direct way to display the article title is to use{{archive.Title}}.

If you need more precise control, or need to retrieve the title of a specific article on a non-detail page (such as sidebar recommended articles), you can usearchiveDetailThe tag is used to obtain the details of a single article.

Example code:

{# 在文章详情页，直接通过全局变量archive获取标题 #}
<h1>{{archive.Title}}</h1>

{# 或者使用archiveDetail标签获取当前文章标题 #}
<h1>{% archiveDetail with name="Title" %}</h1>

{# 获取ID为1的文章标题 #}
<h2>{% archiveDetail with name="Title" id="1" %}</h2>

InArticle list pageYou will usearchiveListtags to loop through multiple articles. InforWithin the loop, the data of each article will be assigned to the loop variable you define, for exampleitem）。You can use this{{item.Title}}to display the title of each article.

Example code:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
            {# ... 其他列表内容 ... #}
        </article>
    {% endfor %}
{% endarchiveList %}

To display the content of the article

The article content is the core of the page, which includes the rich information you carefully write, such as text, pictures, videos, etc.In AnQiCMS template, displaying article content requires some additional processing to ensure proper rendering and a good user experience.

Similar to the title, inArticle detail pageYou can directly go through{{archive.Content}}To get the content of the article. However, the article content usually contains HTML tags (such as paragraphs, images, links, etc.), and if output directly, these HTML tags may be displayed as plain text by the browser.You need to use in order for the browser to correctly parse and render these HTMLs|safefilter.

|safeFilterThis filter tells the AnQiCMS template engine that the content you output is 'safe' and does not require HTML escaping.It is crucial for displaying HTML content generated by a rich text editor.

Example code:

{# 在文章详情页，通过|safe过滤器显示文章内容 #}
<div class="article-content">
    {{archive.Content|safe}}
</div>

{# 或者使用archiveDetail标签获取当前文章内容 #}
<div class="article-content">
    {% archiveDetail with name="Content" %}|safe}
</div>

Rendering of Markdown content: If your article content is written through a Markdown editor, AnQiCMS providesContentfield'srenderparameters to control whether it is converted to HTML.

Example code (Markdown rendering)

{# 强制将Markdown内容渲染为HTML #}
<div class="article-content">
    {% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}</div>

Lazy loading optimization of imagesTo improve page loading speed and user experience, you can enable lazy loading for images in the article content. It is provided by AnQiCMS.ContentField supportslazyThis parameter will be used to<img>label'ssrcReplace with the lazy loading property you specified (for exampledata-src)

Example code (image lazy loading):

{# 启用图片懒加载，将src替换为data-src #}
<div class="article-content">
    {% archiveDetail articleContent with name="Content" lazy="data-src" %}{{articleContent|safe}}</div>

Considerations in actual operation

1. Importance of contextIn template development, understanding the current context of the template is crucial. In the article detail page,archivevariables are automatically available; while in a loop list (such asarchiveListIn it, you need to use loop variables likeitem) to access each article's properties.
2. Content security:|safeThe filter is powerful, but it must be used with caution. It prevents the template engine from escaping HTML content, which means that if the article content contains malicious scripts, these scripts may also be executed.Therefore, ensure that the content of the articles you display comes from a reliable source.
3. Flexible calling method: AnQiCMS provides various calling methods, such as direct access{{变量.属性}}by visiting, or use{% 标签 with name="属性名" %}. This allows you to choose the most suitable template writing style according to your specific needs and personal preferences.

By mastering these call techniques, you can fully utilize the AnQiCMS template system, flexibly display the article titles and content of the website, and create a beautiful and efficient website page.

Frequently Asked Questions (FAQ)

Q1: Why is my article content displayed as raw HTML code on the front end instead of formatted content?

A1: This is usually because you did not add after the variable displaying the article content|safeFilter. In AnQiCMS (and many other template engines), to prevent cross-site scripting attacks (XSS), all HTML content obtained from the backend and output to the frontend is automatically escaped, that is, HTML tags are displayed as plain text.For example, if you want to display{{archive.Content}}Please make sure to change it to{{archive.Content|safe}}so that the browser can correctly parse and render the HTML tags within it.

How to display only the article title and a brief content abstract on the article list page, rather than the entire content?

A2: You can use it on the article list page:archiveListTags to retrieve the article list. For the content abstract, you can{{item.Description}}Invoke the article's abstract field. If the abstract is empty, or you want to extract a part of the article content as a summary, you can use|truncatecharsor|truncatewordsfilter on{{item.Content}}to extract and use in conjunction with|striptagsThe filter removes all HTML tags to ensure the abstract is plain text. For example:{{item.Content|striptags|truncatechars:100}}It will truncate the first 100 characters (including Chinese) and remove HTML tags.

Q3: My article is written in Markdown format, how can I correctly render it as HTML on the front-end page?

A3: If you use the Markdown editor when editing articles in the background and want to render the content correctly as HTML, you canarchiveDetailTag callContentWhen adding a fieldrender=trueParameters. For example:{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}. AnQiCMS will automatically convert Markdown syntax to standard HTML format before outputting content, and combine|safethe filter to ensure its normal display.