How to get and display the title, content, thumbnail, and publish time on the article or product detail page?

When using AnQi CMS to manage website content, whether it is to publish new articles, update product details, or build list pages, one of the core tasks is to accurately and efficiently display the title, body, thumbnail, and publish time of the content.AnQi CMS provides concise and powerful template tags, making these operations intuitive and easy to understand.This article will provide a detailed introduction on how to flexibly retrieve and present these key information on your website, ensuring that the content display is both beautiful and practical.

Core content retrieval: display of a single article or product page

When you need to display a standalone article or a product detail, the Anqi CMS'sarchiveDetailTags are your preferred tool. This tag is specifically used to extract detailed data of specific content from the database.

Display of title and main contentBasic requirements for obtaining the title and content of the material. In your template file (for example{模型table}/detail.htmlIn it, you can usearchiveDetailtags to obtain directly. For example, the article title can be obtained through{% archiveDetail with name="Title" %}Display. If you want to assign the obtained title to a variable for repeated use elsewhere in the page, you can write{% archiveDetail articleTitle with name="Title" %}{{articleTitle}}. The method of obtaining the main content is similar, using{% archiveDetail with name="Content" %}It can be. Since the text usually contains HTML tags, you may need to cooperate to ensure that the browser correctly parses it.|safeFilter, for example{{archiveContent|safe}}If your text is in Markdown format, you can also make use of it.render=trueParameters are converted, for example{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}.

Flexible use of thumbnails and imagesThumbnails play an important role in content display. Anqi CMS providesThumbandLogofield to represent the thumbnail of the content.ThumbIt is usually a thumbnail automatically generated by the system, whileLogoit may represent the cover image or the first picture of the content. You can access{% archiveDetail with name="Thumb" %}or{% archiveDetail with name="Logo" %}Get the image address of them. If the content contains a set of images,Imagesthe field will return an array of image URLs, and you can use{% archiveDetail articleImages with name="Images" %}Assign the image array to a variable and then useforLoop to display all images. For example,{% for img in articleImages %}<img src="{{img}}" alt=""/>{% endfor %}.

Accurate presentation of the publish timePublish time (CreatedTimeis an important indicator of content timeliness. The time stored by AnQi CMS is a Unix timestamp, and in order to display it in a human-readable format on the page, we need to usestampToDatefunction.This function is very flexible, allowing you to define the output format according to the Go language time formatting rules.{{stampToDate(archive.CreatedTime, "2006年01月02日")}}; To display hours, minutes, and seconds, it can be set to"2006-01-02 15:04:05".

The content presentation of the list page: Efficient batch acquisition

When displaying an article list, product list, or search results page, we usually need to batch retrieve the titles, abstracts, thumbnails, and publication times of multiple pieces of content. Anqi CMS'sarchiveListThe label can meet this requirement.

Loop traversal and data access archiveListThe tag can be extracted based on your conditions (such as category ID, model ID, limit quantity, etc.). It returns an array object, and you need to useforLoop to iterate over each item. Inside the loop, the title, description, thumbnail, and publish time of each content item (for example, nameditem) can be easily accessed through{{item.Title}}/{{item.Description}}/{{item.Thumb}}and{{item.CreatedTime}}and so on. Easy access.

Date format and image processingSimilar to a single content page, in the list page,item.CreatedTimeSimilarly need to pass throughstampToDateThe function formats the date to ensure clear and easy readability. For thumbnails, you can use{% if item.Thumb %}<img src="{{item.Thumb}}" alt="{{item.Title}}">{% endif %}to determine if the thumbnail exists and display. The description on the list page (DescriptionIt is usually a summary of the text, if it is output directly, it may be too long, at this time, you can consider usingtruncatecharsortruncatewordsfilters to truncate it, for example{{item.Description|truncatechars:100}}to keep the page layout neat.

Summary

The AnQi CMS provides great flexibility and convenience in content acquisition and display. Whether it is handling a single article or product detail page, or building a rich list page, througharchiveDetailandarchiveListThese core tags, combined with field names, time formatting functions, and practical filters, allow you to easily master various content presentation needs.Mastering the use of these tags will make your website content management and front-end display more efficient and professional.

Frequently Asked Questions (FAQ)

1. Why does my article body content display with a lot of HTML tags instead of well-formatted text?This is usually because you haven't used|safeFilter.The AnQi CMS template engine, for security reasons, defaults to escaping all output content with HTML.|safeFilter, for example{{archiveContent|safe}}So that the browser can correctly parse and render HTML.

2. How to set the thumbnail of the article list page to automatically extract the first image from the text when no manual upload is made?Our AQ CMS is built-in with this intelligent function. While you are editing articles or products, if there is no thumbnail uploaded in the "Document Images" field, but the article content is (ContentField) contains images, the system will automatically try to extract the first image in the text as a thumbnail. You just need to use the template.{{item.Thumb}}or{{archive.Thumb}}Call it, the system will automatically handle the priority, first using the manually uploaded thumbnail, and if there is none, it will try to extract the text image.

3. I want to display the publication time of the article, but it shows a string of numbers (timestamp), how can I make it display as a date format?The publication time stored internally in Anqi CMS (for exampleCreatedTime) is a Unix timestamp. To display it as a readable date format on the front-end page, you need to usestampToDateThe function performs the conversion. For example, `{{stampToDate(item.CreatedTime, “2006-0