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, logically-arranged detail page that can effectively increase user reading time, reduce bounce rate, and help search engines better understand and crawl content.For friends who use 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 just like stacking LEGO bricks by combining and adjusting template files, tags, and filters.

Core Concept: The charm of separating templates and data

The foundation of AnQiCMS custom article detail page lies in its core design of 'template and data separation'.All article content (title, 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 freely adjust the page layout according to your business needs without modifying the core data.

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

  • General detail template: /{模型table}/detail.htmlThis is the most common detail page template that will be applied to all articles under this content model that have not specified a specific template. For example, if it is an article model, it would usually bearticle/detail.html.
  • A specific article template: /{模型table}/detail-{文档ID}.htmlIf you have a particular article that requires a completely different layout, you can create a dedicated template for it. For example, an article with ID 10 could have a template filename ofarticle/detail-10.html.

Step 1: Create or specify your custom template file

To customize the layout of the article detail page, 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'), you can modify or create/{模型table}/detail.htmlFiles. For example, if you mainly publish articles, thenarticle/detail.htmlthat is your main battlefield.
  2. Personalized customization:For an article that requires independent design, you can enter the filename of the template you have specially designed in the 'Document Template' field under 'Other Parameters' when editing the article in the background. For example, you have created a file namedspecial_article.htmlThe template, then enter it here.special_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.

Step two: 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. Obtain the core content:archiveDetailThis is the most commonly used tag on the article detail page, used to obtain detailed data of the current article.

    • Article Title: {% archiveDetail with name="Title" %}Or use it directly{{archive.Title}}.
    • Article content: {% archiveDetail with name="Content" %}[en] Pay special attention, if the article content contains HTML tags, you need to use a filter in conjunction with|safesuch 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" %}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 fieldThe 'Flexible Content Model' of AnQiCMS is one of its highlights.You can customize exclusive fields for different content types (such as 'article' or 'product'), such as 'author' and 'source' for articles, and 'price' and 'model' for products, etc.

    • 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 create a custom field namedauthoryou can directly display its value through{% archiveDetail with name="author" %}.

  3. Enrich page elements and associated content:

    • Article classification information:UsecategoryDetailTags, such as{% categoryDetail with name="Title" id=archive.CategoryId %}Display the name of the article's category, and through{% categoryDetail with name="Link" id=archive.CategoryId %}Get the category link.
    • Related tags: tagListTags can list tags associated with the current article, helping readers discover more interesting topics.
    • Previous/Next article: prevArchiveandnextArchiveTags can easily be added at the bottom of articles to enhance users' browsing depth within the site.
    • Recommended related 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 the website name, Logo,contactTags can display contact information;tdkTags are used to output the page's SEO title, keywords, and description.

  4. Logical control and organization:if/forandinclude

    • ifTags let you show or hide certain content based on conditions, like 'Show if the article has a thumbnail'.
    • forTags are used to iterate over list data, such as multiple images, multiple tags, etc.
    • includeTags can extract common modules such as headers, footers, and sidebars into separate files, and then reference them where needed, greatly enhancing 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, which can perform secondary processing on data 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 an easily readable date.
  • Text truncation:truncatecharsIf you want to display only the summary of an article 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:safeThe mentioned before, for rich text fields like article content, it is essential to use|safeFilter, such as{{archive.Content|safe}}to ensure that HTML code can be properly parsed 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 every data point, you can control it with ease, creating a professional-level content page that meets both brand characteristics and user needs.

Common Questions (FAQ)

How can I make all articles under a specific category use my custom detail page layout instead of setting them one by one?You can edit the corresponding category in the "Content Management" -> "Document Category" section of the AnQiCMS backend.In the editing page of the category, find the 'Other Parameters' section, there is a 'Document Template' field.custom_detail.html)，and ensure that the template file exists in your template directory.So, all articles under this category (if no separate document template is specified) will use this layout.You can even choose to "apply to child categories", so that the 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 the number of reads, author information, etc.?AnQiCMS provides rich tags to obtain this information. The article detail page can be accessed directly through{{archive.Views}}Obtain the number of reads. If you need to display the author (user) information, you can through{{archive.UserId}}Get the author ID and then combineuserDetailthe tag to call the author's detailed information, such as{% userDetail author with name="UserName" id=archive.UserId %}{{author}}to display the author's nickname.

3. How should I operate if I want to embed some external content (such as video player code, ad code) in the article detail page?{% archiveDetail with name="你的自定义字段名" %}to get and display these codes