How to precisely control the display of document title, introduction, content, and other elements on the article detail page?

The article detail page is the core display area of the website content, which directly affects the user's experience in obtaining content and the perception of the website's professionalism.For AnQiCMS users, mastering how to finely control the display of various elements on article detail pages can not only enhance the visual appeal of the website but also optimize the user's reading path, effectively improving SEO performance.

AnQiCMS as a flexible content management system, provides various ways to help us accurately adjust the title, summary, body, and other additional information display of the article detail page.This is due to its powerful template engine and backend configuration features.

Understanding the 'skeleton' of the article detail page: template file

In AnQiCMS, the display of article detail pages cannot do without the support of template files. It is like a 'frame' for content, determining the layout and style of the content.

First, each template set has a default document detail page template, usually located/{模板目录}/{内容模型}/detail.htmlFor example, if it is an article model, it may bearticle/detail.html. This file defines the common layout of all article detail pages under the model.

Secondly, if you want to use a different layout for articles in a specific category, such as articles under the "Industry News" category, AnQiCMS also supports specifying independent templates for categories.You can edit categories in the background, and set the "category template" in the "other parameters".For example, set tonews_list.htmlSo if the file exists in your template directory, the category and its subcategory articles will apply this template.

Further, Anqi CMS also supports specifying independent templates for individual documents. When editing article details, you can specify a unique template file for a particular article through the "Other Parameters" section under the "Document Template" field, for examplespecial_report.htmlThis article can completely break away from the general layout and show a personalized design.

Apply these template files flexibly is the first step to precisely control the display of article detail pages.

Core tool:archiveDetailTag

Inside the template file, the core tag for achieving fine-grained control over the article detail page content is undoubtedlyarchiveDetail. This tag allows us to call various field information of the article as needed.

The method of invocation is usually{% archiveDetail 变量名称 with name="字段名称" %}. If no variable name is defined, it will output the result directly; if a variable is defined, such as{% archiveDetail articleTitle with name="Title" %}So it can be passed through{{articleTitle}}reference. In addition, you can also use it directly in the context of the article detail page.{{archive.文档字段}}to call the fields of the current document.

Let's see how to use it to control the display of different elements:

• Title and SEO information: present accurately

  • Document title (Title): This is the main title of the article, usually used on the page.<h1>Labels directly affect user reading and SEO. We can go through{{archive.Title}}or{% archiveDetail with name="Title" %}to display.
  • SEO Title (SeoTitle): If you want the page's<title>The label content is different from the article title, it can be set as "SEO Title" in the background. It can be called in the template by{% tdk with name="Title" %}to call the page's<title>The content will prioritize displaying the SEO title of the document, followed by the document title, and whether to add the website name suffix can be decided according to the backend settings.
  • Keywords (Keywords) and description (Description)These two are important components of SEO optimization. They can be{% tdk with name="Keywords" %}and{% tdk with name="Description" %}used as tags for themetatags to guide search engines to understand the page topic. At the same time, theDescriptionThe field is often used as the summary of an article, which can be accessed directly.{{archive.Description}}or{% archiveDetail with name="Description" %}It is displayed above the main text, guiding the reader.

• Main content: flexible control.

  • Document content (Content)This is the main part of the article. Pay attention to safety and format when displaying.
    • If the article content contains HTML tags, in order to avoid them being automatically escaped to plain text by the AnQiCMS template engine, we need to use|safeFilter, for example{{archive.Content|safe}}This allows images, links, and other HTML structures to be rendered in the text.
    • If your content is written in Markdown editor in the background and you want to automatically convert it to HTML display on the front-end, you canarchiveDetailthe tag withrender=trueparameters, for example{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}This allows Markdown syntax to be correctly parsed.

• Visual focus: Illustration and cover

  • Cover main image (Logo) and thumbnail (Thumb): Typically used on article list pages or social sharing, but sometimes also need to display a main visual image on detail pages. They can be accessed by{{archive.Logo}}and{{archive.Thumb}}to call.
  • Cover group (Images)If an article contains multiple cover images (such as the carousel on the product details page),Imagesthe field will return an image array. You need to cooperate withforLoop tags to iterate and display these images, for example:

    
    {% archiveDetail articleImages with name="Images" %}
    {% for img in articleImages %}
        <img src="{{img}}" alt="{{archive.Title}}" />
    {% endfor %}
    

  • It is worth mentioning how these images are processed (whether to generate WebP format, whether to compress, thumbnail size, etc.), all of which can be globally configured in the "Content Settings" backend, thereby affecting the final display effect on the front end.

• Time, views and other basic information

  • Publish time (CreatedTime), and Update time (UpdatedTime): Pass{{archive.CreatedTime}}Timestamp can be obtained. To format it into a readable date and time, you can usestampToDateFilter, for example{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}.
  • Views (Views): Use directly{{archive.Views}}to display the number of times the article has been read.
  • Category information (Category): The category information of the article can be obtained througharchive.Categoryan object to display the category name (archive.Category.Title) or category link (archive.Category.Link) for breadcrumb navigation or related article links.

Customization and Expansion:archiveParamsTag

In addition to the built-in fields of AnQiCMS, we can also add custom fields to the article or product model through the "Content Model" feature in the background, such as "Article Author", "Product Price", "Product Features", etc. These custom fields are a reflection of the flexibility of AnQiCMS, and their display on the article detail page requires the help ofarchiveParams.

• Call a specific custom fieldIf you know the name of the custom field (for exampleauthorIt can be directly passed through{% archiveDetail with name="author" %}to retrieve and display its value.
• Loop to display all custom fieldsIf you are not sure about which custom fields there are, or want to dynamically display them, you can usefora loop to iterate:

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

  This is particularly useful when displaying product parameters on the product detail page.

Rich association: Tags and navigation

To enhance user experience and content depth, the article detail page often also displays some related content: