In website operation, the article detail page is the core touchpoint for users to obtain information, and its way of presenting information directly affects user experience and the transmission of content value.AnQiCMS as a flexible content management system provides powerful and fine-grained control capabilities, allowing you to accurately display the required document ID, title, link, and other information on the article detail page.

To achieve precise control over the content of the article detail page, we mainly rely on the template tag system of AnQiCMS. Its core lies inarchiveDetailThe tag is used to retrieve detailed data of the current or specified article. By passing different parameters to this tag, you can extract various properties of the article as needed.

Core Tool:archiveDetailThe use of tags

archiveDetailTags are the basis for obtaining article data on the article detail page. Their basic usage is{% archiveDetail with name="字段名称" %}. Among them,nameParameters are key, you need to specify the specific field names of the article properties you want to obtain.

In addition to getting the information of the current article, you can also useidortokenparameters to specify the details of other articles, such as{% archiveDetail with name="Title" id="10" %}The article title with ID 10 will be retrieved. But usually on the article detail page, the system will automatically identify the current article, so you do not need to provide it explicitlyidortoken.

Next, we will discuss in detail how to utilizearchiveDetailTags and their related auxiliary tags, accurately call and display various information on the article detail page.

Delicate and detailed: calling various information fields.

AnQiCMS provides rich built-in fields for articles, and you can flexibly call them according to your needs.

1. Basic text information: Title, description and linkThe basic information of an article includes the title, link, and description.

  • To display the article title, you can use{% archiveDetail with name="Title" %}.
  • The unique ID of the article is through{% archiveDetail with name="Id" %}Retrieve.
  • The external access link of the article can be through{% archiveDetail with name="Link" %}To display, convenient for users to share or navigate.
  • The brief description of the article is usually provided by{% archiveDetail with name="Description" %}This is very important in SEO and content preview.

2. The content and structure of the article: text and table of contentsThe core of the article is its content.

  • To display the main text of the article, please use{% archiveDetail with name="Content" %}. Since the article content may include HTML or Markdown formatting, it is usually necessary to use|safea filter, that is,{{archiveContent|safe}}If the content is in Markdown format, you can also userender=trueThe parameter makes the system automatically convert it to HTML before output. Moreover, AnQiCMS also supports image lazy loading(lazy="data-src") and other optimization functions.
  • If the content of the article has clear title levels (H1, H2, etc.),ContentTitlesTags can extract these titles and return them as an array, making it convenient for you to generate an article table of contents (TOC) and enhance the reading experience of long articles.

3. Image and Visual Elements: Cover and Group PhotosVisual content is also important for the article detail page.

  • The cover image of the article can be accessed through.{% archiveDetail with name="Logo" %}Retrieve.
  • The thumbnail processed by the system is then by.{% archiveDetail with name="Thumb" %}.
  • If the article includes a set of images (such as a product detail page carousel),Imagesthe field will return an array of image URLs. You need to useforLoop through{% archiveDetail archiveImages with name="Images" %}display these images one by one.

4. Data in the time dimension: publication and updateThe time of article publication and update is an important indicator of content timeliness.

  • The creation time of the article passes.{% archiveDetail with name="CreatedTime" %}Retrieve.
  • The update time of the article passes.{% archiveDetail with name="UpdatedTime" %}Get. Since these two fields return timestamps, you need to combinestampToDatea filter to format it into a readable date and time format, such as{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}.

5. Categorization, Tags and Associations: Organizing Content

  • The category ID of the article can be obtained through{% archiveDetail with name="CategoryId" %}Obtained. After obtaining the category ID, you can further usecategoryDetailTags to get the name, link, and other details of the category, for example:{% categoryDetail with name="Title" id=archive.CategoryId %}.
  • Tags related to the article (Tag) can be accessed throughtagListTag retrieval, usually combined with the current article ID to call, for example{% tagList tags with itemId=archive.Id %}Then, display each tag's name and link in a loop.
  • For the number of views and comments on the article,ViewsandCommentCountThe field can be directly called, for example{% archiveDetail with name="Views" %}.

6. The extensibility of custom fields: model parametersThe AnQiCMS content model feature allows you to define additional custom fields for different types of articles.These custom fields greatly enhance the flexibility of the article detail page, such as adding "price", "inventory", and so on.

  • To get the values of these custom fields, you can directly use{% archiveDetail with name="你的自定义字段名" %}.
  • If you want to display all custom fields or need to iterate through their names and values,archiveParamsTags are a stronger choice. It will return an array containing all custom parameters, you can usefora loop to dynamically display, for example:
    
{% archiveParams params %}
{% for item in params %}
    <div>{{item.Name}}：{{item.Value}}</div>
{% endfor %}
{% endarchiveParams %}

to enhance user experience: navigation and related content

The user experience of the article detail page is not just about displaying the current article, but also about guiding users to discover more related content.

  • Previous/next article: prevArchiveandnextArchiveTags can easily obtain the title and link of the previous and next articles of the current article, for example: 
    
{% prevArchive prev %}
    {% if prev %}<a href="{{prev.Link}}">{{prev.Title}}</a>{% endif %}
{% endprevArchive %}
  • Recommended articles:ByarchiveListLabel, andtypethe parameter torelatedYou can easily display a list of recommended articles related to the current article. The system will intelligently recommend based on keywords of the article or articles in the same category.

Application scenario: Flexible combination display

In practice, you will combine the above tags based on the website design. For example, a typical article detail page usually includes the following elements and their calling methods:

  • Top of the page:Website Logo ({% system with name="SiteLogo" %}), navigation menu ({% navList navs %}...{% endnavList %}), breadcrumb navigation ({% breadcrumb crumbs %}).
  • article main area:
    • Main Title:<h1>{% archiveDetail with name="Title" %}</h1>
    • metadata: publish time<span>{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>, read count<span>{% archiveDetail with name="Views" %} 阅读</span>, Category<span><a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>.
    • Content:{% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}{% endarchiveDetail %}
    • Article Tags:{% tagList tags with itemId=archive.Id %}{% for tag in tags %}<a href="{{tag.Link}}">{{tag.Title}}</a>{% endfor %}{% endtagList %}
  • Footer:Copyright ({% system with name="SiteCopyright" %}), Friendship links ({% linkList friendLinks %}).

If it is a product detail page, in addition to the basic information, it will also focus on displaying product images, custom parameters, and product descriptions. For example, you can use{% archiveDetail archiveImages with name="Images" %}to display a set of product images and proceed to{% archiveParams params %}Display product specifications, models, and other custom parameters in a loop.

AnQiCMS provides a complete and easy-to-understand template tag set, allowing you to flexibly and accurately control every information element on the article detail page.Familiarizing yourself with the usage of these tags will greatly enhance your operational efficiency and expressiveness in managing website content.

Frequently Asked Questions (FAQ)

1. How to correctly render HTML or Markdown in article content?When you use{% archiveDetail with name="Content" %}When calling the article content, if the content contains HTML tags, it needs to be accompanied by|safeFilter, for example{{archiveContent|safe}}To prevent HTML code from being escaped and displayed incorrectly. If the content is in Markdown format, you can add `render="to the tagarchiveDetailattribute