When using AnQiCMS to build and manage websites, the title and content of the articles are core elements. Their correct invocation and display are directly related to the visual presentation of the website, user experience, and search engine optimization.Understanding how to efficiently and accurately handle this information in AnQiCMS templates is the key to website content operation and template customization.
AnQiCMS's template system adopts 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{{变量}}To represent, and control logic (such as conditional judgment, loops, etc.) uses single curly braces and percent signs{% 标签 %}To define.
AnQiCMS Template Overview
In AnQiCMS, all template files are stored in/templatedirectory, and named with.htmlWhen you need to call the title and content of the article, you must first ensure that you are editing the correct template file, for example, the article detail page usually corresponds to{模型table}/detail.htmlor a custom onedetail.html。Template files are unified using UTF-8 encoding to avoid garbled characters issues.
Call article title
The article title is the 'Facade' of the content, and it plays an important display role on both the list page and the detail page.
ForArticle details pageThe system will usually load all data of the current article automatically based on the URL, you can directly access it through 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 to retrieve the title of a specific article on non-detail pages (such as sidebar recommended articles), you can usearchiveDetailLabel. This label is specifically used to retrieve the detailed information 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 cycle through multiple articles.forinside the loop, the data of each article will be assigned to the loop variable you define (for exampleitem）。此时，您可以通过{{item.Title}}来显示每篇文章的标题。
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 %}
展示文章内容
The content of the article is the core of the page, which includes the rich information you carefully write, such as text, images, and videos.In AnQiCMS template, displaying article content requires some additional processing to ensure it is rendered correctly and provides a good user experience.
与标题类似，在Article details page, you can directly access through{{archive.Content}}Get the content of the article.However, the article content usually contains HTML tags (such as paragraphs, images, links, etc.), if output directly, these HTML tags may be displayed as plain text by the browser.|safeFilter.
|safeFilterThis filter tells 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 rich text editors.
Example code:
{# 在文章详情页，通过|safe过滤器显示文章内容 #}
<div class="article-content">
{{archive.Content|safe}}
</div>
{# 或者使用archiveDetail标签获取当前文章内容 #}
<div class="article-content">
{% archiveDetail with name="Content" %}|safe}
</div>
Rendering Markdown content：If your article content is written using the Markdown editor, AnQiCMS providesContentfield'srenderparameters to control whether it should be converted to HTML.
Example code (Markdown content rendering):
{# 强制将Markdown内容渲染为HTML #}
<div class="article-content">
{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}</div>
Lazy loading optimization for images：To improve page loading speed and user experience, you can enable lazy loading for images in the article content. AnQiCMS'sContentfields supportlazyparameter, which will<img>TagssrcProperty replacement with the lazy loading property you specified (for example,data-src).
Example code (lazy loading of images):
{# 启用图片懒加载，将src替换为data-src #}
<div class="article-content">
{% archiveDetail articleContent with name="Content" lazy="data-src" %}{{articleContent|safe}}</div>
Considerations in actual operations
- 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 asarchiveList）中，You need to use loop variables (such asitem）to access the properties of each article. - Content security:
|safeThe filter function is powerful, but it must be used with caution.It will prevent the template engine from escaping HTML content, which means that if the article content contains malicious scripts, these scripts may also be executed.Therefore, please ensure that the content of the articles you display is from a reliable source. - Flexible calling methods：AnQiCMS provides various calling methods, such as directly through
{{变量.属性}}it, or use{% 标签 with name="属性名" %}. This allows you to choose the most suitable template style according to your specific needs and personal preference.
By mastering these call techniques, you can fully utilize the template system of AnQiCMS, flexibly display the article titles and content of the website, and create a website page that is both beautiful and efficient.
Common Questions (FAQ)
Q1：Why does my article content display as raw HTML code on the front end instead of formatted content?
A1:This is usually because you did not add|safe{{archive.Content}}to the variable behind the displayed article content.{{archive.Content|safe}}This way, the browser can correctly parse and render the HTML tags contained within.
Q2：How to display only the article title and a brief content abstract on the article list page instead of the full content?
A2：On the article list page, you can usearchiveListTags to get the article list. For the content abstract, you can use{{item.Description}}Call the abstract field of the article. If the abstract is empty, or you want to extract a part of the article content as a summary, you can use|truncatecharsor|truncatewordsFilter for{{item.Content}}to extract and match with|striptagsThe filter removes all HTML tags to ensure that the summary is plain text. For example:{{item.Content|striptags|truncatechars:100}}It will truncate to 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 to edit articles in the background and want to render the content correctly as HTML on the front end,archiveDetailtag callsContent字段时，添加render=trueFor example:{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}. Thus, AnQiCMS will automatically convert Markdown syntax to standard HTML format before outputting content, and combine|safefilters to ensure proper display.