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.A well-designed, comprehensive article detail page that not only enhances user experience but also effectively helps search engines understand the page content, thereby optimizing the website's SEO performance.AnQiCMS 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 Anqicms.archiveDetailTemplate tag. This tag is the core of the article detail page and can accurately capture various data of the current or specified article.

Get core text information

Firstly, for the basic text information such as the title, description, and keywords of the article, it is very direct to obtain. In the template of the article detail page, you can directly go through{{archive.Title}}/{{archive.Description}}and{{archive.Keywords}}Call it. This method is concise and clear, directly accessing the current article object (archive).

If you need to specify a field more flexibly, or want to retrieve article data from a non-current page, you can usearchiveDetailLabel. 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 is written as:{% archiveDetail with name="Title" id="10" %}. The same method 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}}To display the main content of the article. It is worth noting that since the content of the article 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 cooperate with the use of|safeFilter, that is{{archive.Content|safe}}.

If your article content is written in Markdown format, Anqi CMS also supports rendering it into HTML. You canarchiveDetailthe tag withrender=truefor example:{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}If you do not want Markdown conversion in some scenarios, you canrenderis set tofalse.

In addition, to optimize image loading performance, Anqi CMS also supports lazy loading of images. When callingContentWhen specifying a field, you can specify lazy loading attributes such aslazy="data-src"The system will automatically convert images in the contentsrcproperties todata-srcFor easy identification and processing by front-end lazy loading scripts.

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

The visual elements of the article are also important. Anqi CMS provides various ways to manage and display images.

  • Thumbnail: Usually used for list display or as the representative image of the article. You can use{{archive.Thumb}}Get the thumbnail URL of the article and then embed it into<img>tags:<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />.
  • Cover main imageIf you upload multiple images for an article, the system will intelligently identify the first one as the cover image. This can be{{archive.Logo}}Get it.
  • Multi-image display (group image)If the article is associated with multiple images and you want to display them in a carousel or gallery on the detail page,archive.Imagesit will return an array of image URLs. At this point, you need to useforLoop to iterate 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 article metadata can also provide a lot of useful information.

  • Category: Articles are usually assigned to a category. To display the category name and link, you can directly accessarchivethe object'sCategoryattribute:<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a>.
  • Tag tag: Article tags can help users find related content. To display tags associated with the current article on the detail page, you need to usetagListtags, and specifyitemId=archive.Idto retrieve 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 %}
  • Publish time and update time:archive.CreatedTimeandarchive.UpdatedTimeThe article's publish and update timestamps are provided. To format them into a readable date and time format, you need to usestampToDateFilter and specify the time format string in the Go language style, for example:{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}.
  • view count: The number of visits to the article can be accessed through{{archive.Views}}displayed directly, helping users understand the popularity of the article.

Flexible use of custom fields

The Anqi CMS's 'Flexible Content Model' feature allows you to add custom fields for different types of articles, such as 'article author', 'product price', or 'contact phone' and so on.On the article detail page, there are multiple ways to get these custom fields.

If you know the name of a custom field (such asauthorIt can be directly passed througharchiveDetailtag to get its value:{% 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, you can adjust the display style according to your actual needs.

Summary

ByarchiveDetail/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 as{模型table}/detail.html），You can efficiently build a detailed article page that is both beautiful and practical。

Frequently Asked Questions (FAQ)

  1. Question: The article content is in Markdown format, how can you ensure that it is displayed correctly as HTML？ Answer:When calling the article content field （Content）, in addition to using|safea filter to prevent HTML tags from being escaped, you also need to inarchiveDetailExplicitly specify in the tagrender=true. For example:{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}. The system will automatically convert Markdown to HTML format.

  2. Ask: 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 combine them usingarchiveListTo implement the tag. 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 specify it.categoryIdandorder="views desc"For example:{% archiveList hotArticles with categoryId="当前文章分类ID" order="views desc" limit="3" %}.

  3. Ask: How will the system handle if the article does not have a thumbnail uploaded manually? Answer:Anqi CMS has an intelligent processing mechanism. If you do not upload a thumbnail while editing the article,