In website operation, the article detail page is the core touchpoint for users to obtain information. Its way of presenting information directly affects user experience and the transmission of content value.AnQiCMS as a flexible content management system, provides strong and fine-grained control capabilities, allowing you to accurately display the required document ID, title, link, and other various 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 inarchiveDetailLabel, it 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 Tools:archiveDetailUse of tags

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

In addition to getting the information of the current article, you can alsoidortokenspecify the details of other articles using parameters, for example{% 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 explicitly.idortoken.

Next, we will discuss in detail how to utilizearchiveDetailLabel and its related auxiliary labels, accurately calling and displaying various information of the article detail page.

Exacting in detail: calling each information field

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 most basic information of an article includes the title, link, and description.

  • You can use to display the article title.{% archiveDetail with name="Title" %}.
  • The unique ID of an article is through{% archiveDetail with name="Id" %}retrieved.
  • The external access link of an article can be accessed through{% archiveDetail with name="Link" %}Show to users for easy sharing or navigation.
  • The brief description of the article is usually{% archiveDetail with name="Description" %}provided, which is very important for SEO and content preview.

2. Article content and structure: Text and table of contentsThe core of the article is its content.

  • To display the full text of the article, please use{% archiveDetail with name="Content" %}。Since the content of the article may contain HTML or Markdown format, in order to ensure that the browser parses it correctly, it usually needs to be used with|safea filter, that is{{archiveContent|safe}}If the content is in Markdown format, you can also userender=trueParameters allow the system to automatically convert it to HTML before output. In addition, AnQiCMS also supports lazy loading of images (lazy="data-src") and other optimization features.
  • If the content of the article has clear title levels (H1, H2, etc.),ContentTitlesLabels 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. Images and Visual Elements: Cover and Group PhotosVisual content is also important for the article detail page.

  • The cover image of the article can be{% archiveDetail with name="Logo" %}retrieved.
  • Processed thumbnails are provided by{% archiveDetail with name="Thumb" %}.
  • If the article contains a set of images (for example, the carousel of product details page),Imagesthe field will return an array of image URLs. You need to useforto iterate{% archiveDetail archiveImages with name="Images" %}display these images one by one.

4. Data in the time dimension: release and updateThe publishing and updating time of the article is an important indicator of content timeliness.

  • The creation time of the article is through{% archiveDetail with name="CreatedTime" %}retrieved.
  • The updating time of the article is through{% archiveDetail with name="UpdatedTime" %}Get. As these two fields return timestamps, you need to combinestampToDatethe filter to format them into a readable date and time format, such as{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}.

5. Classification, Tags and Associations: Organizing Content

  • The category ID of the article can be obtained through{% archiveDetail with name="CategoryId" %}Once you have obtained the category ID, you can further usecategoryDetailLabel to get the detailed information of the category, such as:{% categoryDetail with name="Title" id=archive.CategoryId %}.
  • Tags related to the article (Tag) can betagListLabel acquisition, usually combined with the current article ID to call, for example{% tagList tags with itemId=archive.Id %}Then, loop through to display each label's name and link.
  • For the number of views and comments on the article,ViewsandCommentCountThe field can be called directly, for example{% archiveDetail with name="Views" %}.

6. Extensibility of custom fields: Model parametersThe content model feature of AnQiCMS 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

  • You can directly use to get the values of these custom fields{% archiveDetail with name="你的自定义字段名" %}.
  • If you want to display all custom fields, or need to iterate through their names and values,archiveParamsLabels are a more powerful choice. It will return an array containing all custom parameters, which you can useforto dynamically display in a loop, 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 on the article detail page is not only about displaying the current article, but also about guiding users to discover more related content.

  • Previous/Next article: prevArchiveandnextArchiveLabels can conveniently 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 related articles:PassarchiveListtags, andtypeparameter settingsrelatedYou can easily display a list of recommended articles related to the current article. The system will intelligently recommend based on article keywords or articles in the same category.

Practical Application Scenario: Flexible Combination Display

In actual operation, you will combine the above tags according to the website design. For example, a typical article detail page usually contains the following elements and their calling methods:

  • Page top:Website Logo ({% system with name="SiteLogo" %}), English navigation menu ({% navList navs %}...{% endnavList %}), English breadcrumb navigation ({% breadcrumb crumbs %}).
  • Article main area:
    • Main Title:<h1>{% archiveDetail with name="Title" %}</h1>
    • Meta information: publish time<span>{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>, Reading volume<span>{% archiveDetail with name="Views" %} 阅读</span>，English category<span><a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>.
    • content you need to modify:{% 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 information ({% system with name="SiteCopyright" %}), Friend links ({% linkList friendLinks %}).

If it is a product details page, in addition to 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 through{% 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 of the article detail page.Familiarize yourself with the usage of these tags, which will greatly enhance your operational efficiency and expressiveness in managing website content.

Common Questions (FAQ)

1. How to correctly render HTML or Markdown in article content?When you use{% archiveDetail with name="Content" %}When calling 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 not displayed properly. If the content is in Markdown format, you can add `render="archiveDetailtag by adding `render=