How to obtain and display the title, content, thumbnail, and other core information of an article on the article detail page?

When operating a website, the article detail page is the key entry point for users to understand the core value of the content.An article detail page well-designed and comprehensive in information, which not only enhances the user experience but also effectively helps search engines understand the content of the page, thus optimizing the website's SEO performance.AnQiCMS (AnQi CMS) provides a powerful and flexible template tag system that allows you to easily obtain and present all the core information of the article.

To retrieve and display the title, content, thumbnail, and other core information of the article, we mainly rely on the Anqi CMS.archiveDetailTemplate tag. This tag is the core of the article detail page, and it can accurately capture various data of the current article or specified article.

Get core text information

Firstly, obtaining basic text information such as the title, description, and keywords of an article is very direct. In the template of the article detail page, you can directly access{{archive.Title}}/{{archive.Description}}and{{archive.Keywords}}Invoke it. This way is concise and clear, directly accessing the current article objectarchiveproperty.

If you need to specify a field more flexibly, or want to retrieve article data from a non-current page, you can usearchiveDetailTag. For example, to get the title of the current article, you can write:){% archiveDetail with name="Title" %}. If you want to get the title of the article with ID 10, it will be written as:){% archiveDetail with name="Title" id="10" %}. The same method also applies to gettingSeoTitle[SEO Title] andCanonicalUrl[Standard Link] and other text fields.

Displaying article content

The article content is the most important part of the detail page. You can access it through{{archive.Content}}Display the main content of the article. It is worth noting that since the article content usually contains HTML tags, in order to ensure that these tags can be correctly parsed and rendered by the browser rather than displayed as plain text, we need to use in conjunction with|safea filter, that is{{archive.Content|safe}}.

If your article content is written in Markdown format, Safe CMS also supports rendering it as HTML. You can inarchiveDetailtag.render=trueParameter, for example: {% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}If you do not want Markdown conversion in some scenarios, you canrendersetfalse.

In addition, to optimize the performance of image loading, the security CMS also supports lazy loading of images. When callingContentWhen a field is specified, lazy loading properties, such aslazy="data-src", the system will automatically convert the imagessrcThe attribute converts todata-src, making it convenient for front-end lazy loading scripts to identify and process.

Display image resources: thumbnails, main image, and group images

Visual elements of the article are also important. Anqi CMS provides various methods for managing and displaying images.

  • Thumbnail: Often used for list display or as the representative image of an article. You can through{{archive.Thumb}}To get the thumbnail URL of the article, then embed it into<img>Tags inside:<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />.
  • Cover first imageIf you upload multiple images for an article, the system will intelligently recognize the first one as the cover image. This can be{{archive.Logo}}to get.
  • displayed as a group of images (gallery)If the article is associated with multiple images and you want to display them in a carousel or gallery format on the detail page,archive.Imagesan array of image URLs will be returned. At this point, you need to useforLoop through and display these images, for example:
    
{% archiveDetail archiveImages with name="Images" %}
{% if archiveImages %}
    <div class="gallery">
        {% for imageUrl in archiveImages %}
            <img src="{{imageUrl}}" alt="{{archive.Title}}的图片" />
        {% endfor %}
    </div>
{% endif %}

Rich article metadata: categories, tags, time and views

In addition to the content itself, the metadata of the article can also provide a lot of useful information.

  • categoryThe article usually belongs to a category. To display the category name and link, you can directly access.archiveObjects'CategoryProperties:<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a>.
  • Tag tags【en】：Article tags help users discover related content. To display tags associated with the current article on the detail page, you need to usetagListTag, and specifyitemId=archive.Id【en】：to get the tags of the current article:
    
{% tagList tags with itemId=archive.Id %}
    {% for tag in tags %}
        <a href="{{tag.Link}}">{{tag.Title}}</a>
    {% endfor %}
{% endtagList %}
  • Publishing Time and Update Time:archive.CreatedTimeandarchive.UpdatedTimeProvided article publishing and update timestamps. To format them into a readable date and time format, you need to usestampToDateFilter, and specify the time format string in Go language style, for example:{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}.
  • View count: The number of visits to the article can be{{archive.Views}}displayed directly, helping users understand the popularity of the article.

The flexible application of custom fields

If you know the name of a custom field (for example)author), you can directly accessarchiveDetailTo get its value using a tag:{% archiveDetail with name="author" %}.

If you want to iterate over all custom fields and display them, you can usearchiveParamsTags:

{% archiveParams params %}
    {% for item in params %}
        <p>{{item.Name}}：{{item.Value}}</p>
    {% endfor %}
{% endarchiveParams %}

This method is particularly suitable for displaying product parameter lists, and you can adjust the display style according to your actual needs.

Summary

PassarchiveDetail/archive.属性/stampToDate/tagListandarchiveParamsTags and filters, Anqi CMS provides a comprehensive and flexible way to display all necessary information on article detail pages. Combined with the organizational conventions of template files (for example, article detail pages are usually named){模型table}/detail.html），You can efficiently build a detailed article page that is both beautiful and practical.

Common Questions (FAQ)

  1. Question: If the article content is in Markdown format, how can you ensure it is displayed correctly as HTML? Answer:In calling the article content field (Content) you need to use|safea filter to avoid HTML tags from being escaped, in addition toarchiveDetailspecify in the tag.render=true. For example:{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}This system will automatically convert Markdown to HTML format for output.

  2. Question: Can I display data from other articles (such as related articles or popular articles) on the article detail page, in addition to the information of the current article? Answer:Of course you can. You can combine the use ofarchiveListTo implement tags. For example, to display related articles, you can use it on the current article detail page{% archiveList relatedArticles with type="related" limit="5" %}. If you want to display popular articles under a specific category, you can specifycategoryIdandorder="views desc", for example:{% archiveList hotArticles with categoryId="当前文章分类ID" order="views desc" limit="3" %}.

  3. What if the article does not have a manually uploaded thumbnail? The system will handle it as follows? Answer:AnQi CMS has an intelligent processing mechanism. If you do not upload a thumbnail when editing the article,