In the AnQi CMS, sometimes we may need to display detailed information of a preset document at a specific location on the website, such as a recommendation area on the homepage or the 'Featured Content' module in the sidebar, including its title, specific content, and prominent thumbnail.To achieve this goal, Anqi CMS provides a very flexible and intuitive way.
The template system of AnQi CMS uses syntax similar to Django template engine, which means you can use double curly braces{{ 变量 }}to output data, as well as single curly braces and percentage signs{% 标签 %}Execute logical control and call specific functions. This design makes content operation very easy to learn.
Core Tools:archiveDetailtags
To display detailed information of a specific document in the template, you need to use a CMS provided by Anqi namedarchiveDetailThe powerful template tag. This tag is specifically used to retrieve and display detailed data of a single document.
UsearchiveDetailWhen labeling, the most critical thing is to tell the system which document you want to retrieve. This can be achieved in two main ways: by the document ID or by the document's URL alias (token）。In most cases where it is necessary to specify a document precisely, using the document ID is the most direct and robust method.
Assume you want to display the title, content, and thumbnail of the document with ID 15 in the template. You can start like this:
{% archiveDetail specificDoc with id="15" %}
{# 在这里放置显示文档详细信息的代码 #}
{% endarchiveDetail %}
In this code,specificDocis a variable name you define yourself, it will hold all the data of the document with ID 15. With this variable, you can easily access various properties of the document next.
Display the document title
To get the title of the specified document, you just need to accessspecificDocVariablesTitlethe property. In the Anqi CMS template, the properties of variables usually adopt camelCase naming method.
{% archiveDetail specificDoc with id="15" %}
<h2 class="document-title">{{ specificDoc.Title }}</h2>
{% endarchiveDetail %}
This code will render the title of the document with ID 15 andh2Label it.
display the content of the document
The document content usually includes HTML tags, such as paragraphs, images, links, etc. In order for these HTML contents to be correctly parsed and displayed on the page instead of being escaped (displayed as source code) as plain text, you need to use|safeFilter.
{% archiveDetail specificDoc with id="15" %}
<h2 class="document-title">{{ specificDoc.Title }}</h2>
<div class="document-content">
{{ specificDoc.Content|safe }}
</div>
{% endarchiveDetail %}
Add it.|safeAfter the filter,specificDoc.Contentthe HTML code in it will be normally rendered by the browser. If the Markdown editor is enabled on the backend,Contentthe field will also be automatically rendered as HTML,|safeFilter applies here as well. If you have specific requirements and do not want the Markdown content to be rendered,archiveDetailtag.render=falseParameters, but usually, the default rendering is as expected.
Present document thumbnail
In the AnQi CMS, there are usually two main properties that can be obtained for the document thumbnail:LogoandThumb.LogoIt typically refers to the main image or large image of the document,ThumbThe thumbnail is the one processed by the system, which may be smaller in size and more suitable for display in lists or small areas. You can choose one based on your design requirements.
{% archiveDetail specificDoc with id="15" %}
<h2 class="document-title">{{ specificDoc.Title }}</h2>
{% if specificDoc.Thumb %} {# 推荐先判断缩略图是否存在 #}
<div class="document-thumbnail">
<img src="{{ specificDoc.Thumb }}" alt="{{ specificDoc.Title }}" />
</div>
{% endif %}
<div class="document-content">
{{ specificDoc.Content|safe }}
</div>
{% endarchiveDetail %}
In the above code, we added one{% if specificDoc.Thumb %}Judgment, this is a good practice, which can avoid rendering an empty one without thumbnailsimgLabels to maintain the neat structure of the page.
Combining time formatting with custom fields
In addition to the title, content, and thumbnail, you may also want to display the document's publication time, or some custom model fields.AutoCMS also provides a convenient way.stampToDate函数：
{% archiveDetail specificDoc with id="15" %}
<h2 class="document-title">{{ specificDoc.Title }}</h2>
<p class="publish-date">发布时间：{{ stampToDate(specificDoc.CreatedTime, "2006年01月02日") }}</p>
{% if specificDoc.Thumb %}
<div class="document-thumbnail">
<img src="{{ specificDoc.Thumb }}" alt="{{ specificDoc.Title }}" />
</div>
{% endif %}
<div class="document-content">
{{ specificDoc.Content|safe }}
</div>
{# 如果您有自定义字段，例如“Author”，可以直接访问 #}
{% if specificDoc.Author %}
<p class="document-author">作者：{{ specificDoc.Author }}</p>
{% endif %}
{% endarchiveDetail %}
By using these simple tags and variable access methods, you can flexibly obtain and display detailed information of specific documents in any template of the Anqi CMS. Whether it is used in the recommendation position on the homepage or in a specific content module, it can be easily realized.
Common Questions (FAQ)
1. If the specified document ID does not exist, what will the page display?IfarchiveDetailTagged throughidortokenIf the specified document does not exist in the system,specificDocThe variable will be empty. In the template, you can take advantage of this for judgment, for example using{% if specificDoc %}To wrap the display content area. In this way, if the document does not exist, this area will not be rendered, avoiding errors or blank content on the page.
2. BesidesidHow can I specify the document to display?In addition to using the document ID (for exampleid="15"), you can also use the document's URL alias (token）to specify the document. For example, if a document's URL alias isabout-usYou can use it like this:{% archiveDetail specificDoc with token="about-us" %}. The choice depends on which identifier is more convenient to obtain during development.
3.specificDoc.LogoandspecificDoc.ThumbWhat is the difference? Which should I use?
specificDoc.LogoIt usually refers to the main image or original image in the "Document Picture" set in the background, which may be larger in size.specificDoc.ThumbThen the thumbnail is automatically generated and cropped based on the thumbnail size defined in the "Content Settings" on the backend. It is used to display small-sized images (such as list items, sidebar recommendations) when necessary.ThumbCan reduce image loading time, optimize user experience; it may be more suitable to use when displaying large images on the document detail pageLogo. Suggest choosing based on the actual display area size and performance requirements.