In AnQi CMS, sometimes we may need to display detailed information of a preset document at a specific location on the website, such as a recommended area on the homepage or the 'Featured Content' module in the sidebar, including its title, specific content, and eye-catching thumbnail.To achieve this goal, Anqi CMS provides a very flexible and intuitive way.
The Anqi CMS template system uses syntax similar to the Django template engine, which means you can use double curly braces{{ 变量 }}to output data, as well as single curly braces and percent signs{% 标签 %}To execute logical control and call specific functions. This design makes content operation very easy to get started with.
Core Tool:archiveDetailTag
To display detailed information of a specific document in the template, you need to use a one named by AnQi CMSarchiveDetailThe 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 done in two main ways: through the document ID or through the document's URL alias (tokenIn most cases where it is necessary to specify a document precisely, using the document ID is the most direct and robust method.
Suppose you want to display the title, content, and thumbnail of a document with ID 15 in a template. You can start like this:
{% archiveDetail specificDoc with id="15" %}
{# 在这里放置显示文档详细信息的代码 #}
{% endarchiveDetail %}
In this code block,specificDocIs a variable name you define, which will carry all the data of the document with ID 15. With this variable, you can easily access the various properties of the document next.
Display the document title
To retrieve the title of the specified document, you just need to accessspecificDocVariableTitlethe property. In the Anqi CMS template, the properties of variables are usually written in camel case.
{% 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 andh2tags.
display the document content
The content of the document usually includes HTML tags, such as paragraphs, images, links, etc. In order for these HTML contents to be parsed and displayed on the page correctly, rather than being escaped (displayed as source code) as plain text by the browser, 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|safeAfter the filter,specificDoc.ContentThe HTML code will be rendered normally by the browser. If the Markdown editor is enabled on the back-end,Contentthe field will also be automatically rendered as HTML,|safeThe filter applies here as well. If you have special requirements and do not want Markdown content to be rendered, you can consider usingarchiveDetailthe tag withrender=falseParameters, but usually, the default rendering is as expected.
Display document thumbnail
In AnQi CMS, the thumbnail of the document usually has two main properties to obtain:LogoandThumb.LogoThe main figure or large image of a document is usually referred to, andThumbIt is a thumbnail processed by the system, which may be smaller and more suitable for displaying in lists or small areas. You can choose one according to 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 a{% if specificDoc.Thumb %}check, which is a good practice to avoid rendering an empty one without a thumbnailimgLabel to maintain the page structure.
Combine time formatting with custom fields
In addition to the title, content, and thumbnail, you may also want to display the document's publish time, or some custom model fields.A security CMS also provides a convenient way. For example, you can format timestamps usingstampToDateFunction:
{% 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 retrieve and display detailed information of specific documents in any template of AnQi CMS, whether it is used in the recommendation position of the homepage or in a specific content module, it can be easily realized.
Frequently Asked Questions (FAQ)
1. What will the page display if the specified document ID does not exist?IfarchiveDetailTag throughidortokenThen the document specified does not exist in the system,specificDocThe variable will be empty. You can use this in the template to make judgments, for example, using{% if specificDoc %}To enclose the area where the content is displayed. This way, if the document does not exist, the area will not be rendered, avoiding errors or blank content on the page.
2. BesidesidHow can I specify the document to be displayed?In addition to using the document ID (for exampleid="15"), you can also use the document's URL alias (tokenTo specify the document. For example, if a document has a URL alias isabout-us, you 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 one should I use?
specificDoc.LogoIt usually refers to the main image or original image set in the background of the document image, which may be large in size.specificDoc.ThumbThe system generates and crops thumbnails automatically based on the thumbnail size defined in the "Content Settings" on the backend. Use them when displaying small-sized images (such as list items, sidebar recommendations)ThumbCan reduce image loading time, optimize user experience; it may be more suitable to use when displaying large images on document detail pagesLogoSuggest choosing according to the actual display area size and performance requirements.