In Anqi CMS, the layout customization of the article detail page is a key factor in improving the user experience and the display effect of the content.Benefiting from its flexible template mechanism, we can easily tailor the article detail page to meet specific requirements.Below, we will discuss this process in detail from aspects such as the location of the template file, core data calls, and how to use advanced features to achieve personalized layouts.

Understand the template working mechanism of Anqi CMS

The template system of Anqi CMS is the foundation of its flexibility, it adopts syntax similar to the Django template engine, allowing you to quickly get started if you are familiar with front-end development. All front-end template files are stored in a unified location./templateIn the directory. When you create a new template theme, it will have a separate folder, and it will contain aconfig.jsonThe file to define the basic information of the template. For the article detail page, the system will search for it by default.{模型table}/detail.htmlThis file to render the content. For example, if the table name of your article model isarticleThen the default detail page template isarticle/detail.html.

Customize the article detail page template file

AnQi CMS provides multi-level template customization capabilities, allowing you to maintain a unified style globally as well as make detailed adjustments for specific articles or categories.

Firstly, the most common practice is to edit the defaultdetail.htmlfile. You cantemplate/{你的模板主题}/article/detail.html(or the corresponding model table name) directly modify the HTML structure and CSS style to achieve overall layout adjustment.

Further, if you want an article to have a completely independent layout, such as a special event page or product introduction, you can find the 'Document Template' option in the 'Other Parameters' of the article editing interface. Here, you can specify a custom template filename (such asdownload.html）。The system will prioritize using the template you specified when rendering this specific article, rather than the default one.detail.htmlSimilarly, if you want all articles under a certain category to use a specific detail page template, you can set the 'Document Template' field on the category editing page.

Core label and data call: Build the article detail page content

The charm of the article detail page lies in its ability to present rich content in a clear and attractive manner.AnQi CMS provides a series of powerful template tags to help us easily call the various data of articles.

1. Get the main article information (archiveDetail)

The core of the article detail page is of course the data of the article itself.archiveDetailTags are the tools to call up this information. Through{% archiveDetail with name="字段名称" %}In the form, you can get the title of the article. (Title), the main content. (Content), link (Link), the abstract. (Description), SEO title. (SeoTitle)，and thumbnail (Thumb），main image（Logo）and image group（Images) and so on.

For example, show the article title and content：“<h1>{% archiveDetail with name="Title" %}</h1> <div>{% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}</div>It is especially important to note here,ContentThe field usually contains HTML code, so it must be used with caution|safeA filter to prevent content from being escaped and unable to display the HTML structure. If your article content uses Markdown format and you want to render it as HTML on the front end, you canContentadd a fieldrender=trueparameters such as{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}.

Article publish time(CreatedTimeAnd update time(UpdatedTime) will be returned in timestamp format, you can combinestampToDatefilter to format, for example:<span>发布于：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>.

2. Display of related information

To make the article content more rich and relevant, we usually display some auxiliary information:

  • Article Category: categoryDetailTags can be used to obtain the name and link of the article's category.<div>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></div>
  • Article Tags:UtilizetagListTags, we can loop through all related article tags and add links to them.{% tagList tags %}{% for item in tags %}<a href="{{item.Link}}">{{item.Title}}</a>{% endfor %}{% endtagList %}
  • Previous/next article: prevArchiveandnextArchiveTags can help users conveniently navigate between related articles, enhancing the browsing depth of the website.{% prevArchive prev %}{% if prev %}<a href="{{prev.Link}}">上一篇：{{prev.Title}}</a>{% else %}没有了{% endif %}{% endprevArchive %}
  • Related articles:UsearchiveListTags, and settype="related"It can display recommended articles related to the current content of the article, further attracting users.{% archiveList relatedArchives with type="related" limit="5" %}{% for item in relatedArchives %}<li><a href="{{item.Link}}">{{item.Title}}</a></li>{% endfor %}{% endarchiveList %}

3. Expand custom fields (archiveParams)

The flexible content model of Anqi CMS is a major advantage.If you add custom fields (such as 'author', 'source', 'product parameters', etc.) to the content model in the background, the data of these fields can also be called in the detail page.You can directly pass through{% archiveDetail with name="你的自定义字段名" %}to retrieve the value of a specific custom field. If you want to cycle through all custom fields, you can usearchiveParamsTags:{% archiveParams params %}{% for item in params %}<div>{{item.Name}}：{{item.Value}}</div>{% endfor %}{% endarchiveParams %}

flexibly adjust SEO elements

The SEO performance of the article detail page directly affects its visibility in search engines. Anqi CMS allows you to finely control SEO-related elements at the template level.tdkThe tag is a general tool for setting the page title (Title), keywords (Keywords) and descriptions (Description). You can use it in theheadarea to ensure that each article detail page has unique, optimized TDK information. For example:<title>{% tdk with name="Title" siteName=true %}</title>(Display article title and website name)<meta name="keywords" content="{% tdk with name="Keywords" %}"> <meta name="description" content="{% tdk with name="Description" %}">At the same time, for standard links (CanonicalUrl), can also be accessed throughtdkLabel retrieval and setting to avoid duplicate content issues.

The art of content presentation: using filters

The AnQi CMS provides a rich set of filters to make data presentation in templates more beautiful and meet requirements. In addition to what was mentioned before,|safeand|stampToDateThere are some commonly used filters that can help you optimize the display of the article detail page:

  • Extract text: |truncatechars:数字or|truncatewords:数字Can be used to truncate the article abstract or description to prevent excessively long content from affecting the layout.
  • Markdown rendering:If you have enabled the Markdown editor on the backend,|renderThe filter can convert Markdown formatted content to HTML, ensuring that the layout is displayed correctly.
  • Other practical features: |countCount numbers,|replaceText replacement and other features can provide convenience in specific scenarios.

Summary

By the above method, Anqi CMS provides users with great freedom to customize the display layout of article detail pages.From the overall template structure to the specific data call, and to the fine control of SEO elements, you can create a unique and functionally complete detail page based on the brand image, content type, and user needs of the website.This not only improves the user browsing experience, but also helps in the effective dissemination of content and SEO optimization of the website.Boldly try different layouts and label combinations; your article detail page will become a major highlight of the website.

Frequently Asked Questions (FAQ)

  1. Can I set a unified custom article detail page template for all articles under a certain category in the background?Of course you can. In the Anqi CMS backend, go to 'Content Management' -> 'Document Category' to edit the category you want to set.In the category editing page, find the "Other Parameters" field, fill in the name of your custom template file (such ascategory_article_detail.htmlCheck the "Apply to Subcategories" option to make this template apply to all articles in this category and its subcategories.

  2. If I want the article detail page to display more custom information, such as "author introduction" or "product parameters", what should I do?You need to find the corresponding article model (such as "Article Model" or "Product Model") in the "Content Management" -> "Content Model" on the backend, and then add a new "Content Model Custom Field".Define field names, call fields (English), field types, etc.After adding, fill in the values of these custom fields when editing the article, and then pass through the template{% archiveDetail with name="你的调用字段名" %}or{% archiveParams %}tags to call and display them.

3.