How to customize the display layout of the article detail page in AnQiCMS?

In website operation, the article detail page is not only a carrier of content, but also a key link for brand image, user experience, and SEO effect.A well-designed and logically organized detail page that can effectively improve user reading time, reduce bounce rate, and help search engines better understand and capture content.For friends using AnQiCMS, deeply customizing the display layout of the article detail page is actually more flexible and convenient than you imagine.

AnQiCMS as an efficient content management system, deeply understands the needs of content operators, and therefore provides a high degree of freedom in the design of templates and content models.It uses a Django-like template engine syntax, which means you can build a unique article detail page like a Lego set, by combining and adjusting template files, tags, and filters.

Core concept: The charm of template and data separation

The foundation of AnQiCMS customized article detail page lies in its core design of 'template and data separation'.All article content (titles, body, custom fields, etc.) is stored in the database, and how the article is presented is determined by the template file.This allows you to adjust the page layout freely according to your business needs without changing the core data.

Your website template files are usually stored in/template/{你的模板目录}/the path. For article detail pages, AnQiCMS has a set of intuitive naming conventions:

• Universal detail template: /{模型table}/detail.html. This is the most common detail page template that will be applied to all articles under the content model that have not specified a specific template. For example, if it is an article model, it will usually bearticle/detail.html.
• Specific article template: /{模型table}/detail-{文档ID}.html. If you have a special article that requires a different layout, you can create a dedicated template. For example, the template file name for an article with ID 10 can bearticle/detail-10.html.

Step 1: Create or specify your custom template file

To customize the article detail page layout, first you need to find or create the corresponding template file in your template directory.

1. Global Application:If you want to set a unified detail page layout for all articles under a certain content model (such as "article" or "product"), then you can modify or create/{模型table}/detail.htmlFile. For example, if you mainly publish articles, thenarticle/detail.htmlit is your main battlefield.
2. Personalization:For an article that requires independent design, you can enter the filename of the template you have specially designed for it when editing the article in the background. For example, you have created a file namedspecial_article.htmlThe template, then fill it in herespecial_article.htmlThe system will use it to render this article first. Of course, you can also followdetail-{文档ID}.htmlThe naming convention, directly place the file in the corresponding model folder.

Second step: flexibly use template tags, call data as needed

The template file itself is just a skeleton, and it is the rich template tags provided by AnQiCMS that fill in the content.These tags allow you to easily extract article titles, content, images, and even custom fields from the database.

1. Get the core content:archiveDetailThis is the most commonly used tag on the article detail page, used to obtain the detailed data of the current article.

   • Article title: {% archiveDetail with name="Title" %}Or use it directly.{{archive.Title}}.
   • Article content: {% archiveDetail with name="Content" %}. Please note that if the article content contains HTML tags, you need to use it in conjunction with|safefilter, such as{{archive.Content|safe}}.
   • Article description or summary: {% archiveDetail with name="Description" %}.
   • Thumbnail or cover image: {% archiveDetail with name="Logo" %}(First image) or{% archiveDetail with name="Thumb" %}(Thumbnail). If the article contains multiple images,{% archiveDetail archiveImages with name="Images" %}Combine{% for img in archiveImages %}a loop can display multiple images.

2. Display custom additional information:archiveParamsor directly call the fieldAnQiCMS's flexible content model is one of its highlights.You can customize exclusive fields for different content types (such as "articles" or "products"), such as the "author" and "source" for articles, and the "price" and "model" for products.

   • Loop to display all custom fields:

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

   • Directly call a specific custom field:If you have created a namedauthorThe custom field can be accessed directly{% archiveDetail with name="author" %}to display its value.

3. Enrich the page elements and associated content:

   • Article classification information:UsecategoryDetailLabel, for example{% categoryDetail with name="Title" id=archive.CategoryId %}Display the name of the article category and use{% categoryDetail with name="Link" id=archive.CategoryId %}Get category link.
   • Related tags: tagListTags can list tags associated with the current article, helping readers discover more interesting topics.
   • Previous/next article: prevArchiveandnextArchiveTags can conveniently add navigation at the bottom of the article, enhancing the user's browsing depth within the site.
   • Recommended articles:UsearchiveListTags, and settype="related"Can intelligently recommend other articles related to the current article content, increasing content exposure.
   • Site-level general information: systemTags can call the global settings such as website name, Logo, etc.contactLabels can display contact information;tdkLabels are used to output the SEO title, keywords, and description of the page.

4. Logic control and organization:if/forandinclude

   • ifTags allow you to show or hide certain content based on conditions, such as 'only display if the article has a thumbnail.'
   • forTags are used to iterate over list data, such as multiple images, tags, etc.
   • includeTags can isolate common modules such as headers, footers, and sidebars into separate files, and then reference them where needed, greatly improving the maintainability of the template.

Step 3: Skillfully use filters to optimize the display details of content

When displaying content, filters act like small tools, capable of secondary data processing to enhance the display effect.

• Time formatting:stampToDateThe publication time of the article is usually in timestamp format, using{{stampToDate(archive.CreatedTime, "2006年01月02日")}}This format, it can be converted to a readable date.
• Text truncation:truncatecharsIf you want to display only a brief version of the article description or content in some places, you can use{{archive.Description|truncatechars:100}}to truncate the text and automatically add an ellipsis.
• to handle HTML code:safeIt has been mentioned before, for rich text fields like article content, it is essential to use|safea filter such as{{archive.Content|safe}}to ensure that the HTML code can be parsed normally by the browser and not displayed as plain text.

By following these steps, you can deeply customize the display layout of the article detail page in AnQiCMS.From the overall structure to the display of every data point, you can control it freely, creating a professional-level content page that meets both the brand's style and the users' needs.

Frequently Asked Questions (FAQ)

1. How can I make all articles under a certain category use my custom detailed page layout instead of setting them one by one?You can edit the corresponding category in the AnQiCMS background under "Content Management" -> "Document Category".In the category editing page, find the "Other Parameters" area, there is a "Document Template" field.Enter the name of the general detail template file you design for articles in this category (for examplecustom_detail.htmlMake sure that the template file exists in your template directory.This, all articles under this category (if not specified a document template separately) will use this layout.You can even choose to apply it to child categories, so that lower-level categories also inherit this template.

2. Besides the content of the article itself, what related data can I display on the detail page, such as reading figures, author information, etc?AnQiCMS provides rich tags to obtain this information. The article detail page can directly access{{archive.Views}}get the number of reads. If you need to display the author (user) information, you can access{{archive.UserId}}Get the author ID and then combineuserDetailthe tag to call the author's details, such as{% userDetail author with name="UserName" id=archive.UserId %}{{author}}to display the author's nickname.

3. How can I embed some external content (such as video player code, ad code) in the article detail page?You can directly paste external code in the HTML mode of the article content editor.If this code needs to be called dynamically (for example, to display different ads based on the type of article), you can add a "custom field" (for example, "ad code") in the content model, select the type as "multiline text", and then enter the corresponding code during article editing.In the template, you can use it like calling other custom fields,{% archiveDetail with name="你的自定义字段名" %}To get and display these codes.