How to precisely control the display of document titles, summaries, 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 the article detail page can not only enhance the visual effect 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, introduction, body, and other additional information display methods 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 is inseparable from the support of template files. It is like the 'frame' of content, determining the layout and style of the content.

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

其次，If you wish 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 set the 'Category Template' in the 'Other Parameters' when editing categories in the background.news_list.htmlIf your template directory contains this file, the category and its subcategories' articles will apply this template.

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

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

core tools:archiveDetailtags

The core tag inside the template file that implements fine-grained control of the article detail page content is undoubtedlyarchiveDetail. This tag allows us to call various fields of the article as needed.

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

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

• Title and SEO information: accurate presentation

  • Document title (}Title)This is the main title of the article, usually used on the page:<h1>Tags, directly affect user reading and SEO. We can through{{archive.Title}}or{% archiveDetail with name="Title" %}Show.
  • SEO Title (SeoTitle): If you want the page's<title>Label content is different from the article title, it can be set in the background as "SEO Title". It can be called in the template by{% tdk with name="Title" %}the page.<title>Content, it will display the SEO title of the document first, followed by the document title, and whether to append the website name suffix can be decided according to the background settings.
  • Keywords (Keywords) and Description (Description)These two are an important part of SEO optimization. They can be used to{% tdk with name="Keywords" %}and{% tdk with name="Description" %}call tags, used for the page'smetatags to guide search engines to understand the page theme. At the same time, the document'sDescriptionThe field is often used as the abstract of the article, which can be accessed directly.{{archive.Description}}or{% archiveDetail with name="Description" %}Displayed above the main text, guiding the reader.

• Main content: flexible control

  • Document content (Content)This is the main body of the article. When displaying, safety and format must be paid attention to.
    • If the content of the article contains HTML tags, in order to avoid them being automatically escaped into plain text by the AnQiCMS template engine, we need to use|safeFilter, for example{{archive.Content|safe}}So that the images, links, and other HTML structures in the main text can be rendered normally.
    • If your content is written in Markdown editor in the background and you want to convert it to HTML automatically on the frontend,archiveDetailtag.render=trueparameters, such as{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}This allows Markdown syntax to be correctly parsed.

• Visual focus of the illustration and cover

  • Cover first image (Logo) and Thumbnail (Thumb)English usually used in article list pages or social sharing, but sometimes a main visual image is also needed on detail pages. They can be{{archive.Logo}}and{{archive.Thumb}}to call it.
  • Cover group image (Images)：If an article contains multiple cover images (for example, product detail page carousel),Imagesthe field will return an image array. You need to cooperate withforLoop the 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.), which can be globally configured in the "Content Settings" on the backend, thereby affecting the final display effect on the front end.

• Time, views and other basic information

  • Publish time (CreatedTime) And update time (UpdatedTime): Through{{archive.CreatedTime}}To get the timestamp. 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.
  • Categorization information (Category)The article's category information can be obtained througharchive.Categoryto display the category name (archive.Category.Title) or the category link (archive.Category.Link) for breadcrumb navigation or related article links.

Customization and Expansion：archiveParamstags

In addition to the built-in fields of AnQiCMS, we can also add custom fields to the article or product models through the "Content ModelarchiveParamsLabel.

• Call a specific custom fieldIf you know the name of the custom field (for exampleauthor), you can directly access{% archiveDetail with name="author" %}to get and display its value.
• Loop to display all custom fields：If you are not sure about which custom fields there are, or want to display them dynamically, you can cooperateforto traverse in a loop:

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

  This is especially useful when displaying product parameters on the product details page.

Rich association: tags and navigation

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