In the AnQi CMS, customizing the layout of the article detail page is a key factor in enhancing the user experience and content display effect of the website.Benefiting from its flexible template mechanism, we can easily create unique article detail pages to meet specific needs.Below, we will discuss this process in detail from aspects such as the location of the template file, core data calling, and how to use advanced features to achieve personalized layout.

Understand the template working mechanism of Anqi CMS

The template system of Anqi CMS is the foundation of its flexibility, using 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./templateThe directory. When you create a new template theme, it will have an independent folder, and it will contain aconfig.jsonFile defines the basic information of the template. For the article detail page, the system will default to searching for{模型table}/detail.htmlthis file to render the content. For example, if your article model table name isarticleThen the default detail page template isarticle/detail.html.

Customize the template file for the article detail page

Auto 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' section of the article editing interface. Here, you can specify a custom template filename (such asdownload.html）。The system will prioritize the template you specify 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 edit page of that category.

Core Tag and Data Retrieval: Building 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.AutoCMS provides a series of powerful template tags to help us easily call various data of the article.

1. Retrieve the main article information (archiveDetail)

The core of the article detail page is, of course, the data of the article.archiveDetailTags are the tools to call up this information. Through{% archiveDetail with name="字段名称" %}format, you can get the title of the article (Title), the main content (Content), link (Link), abstract (Description), SEO title (SeoTitle), thumbnails (Thumb), main image (Logo）and the image groupImages）etc.

For example, display 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,ContentFields usually contain HTML code, so be sure to add it when using them|safeFilter, to avoid content being escaped and unable to display HTML structure. If your article content uses Markdown format and you want to render it as HTML, you canContentField additionrender=trueparameter, such as{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}.

文章发布时间（English）CreatedTimeand update timeUpdatedTime）会以时间戳形式返回，你可以结合stampToDate过滤器进行格式化，例如：<span>发布于：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>.

2. 关联信息的展示

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

  • Article classification: categoryDetailTags can be used to obtain the name and link of the article category.<div>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></div>
  • Article tags:UtilizetagListTags, we can cyclically display all tags associated with the article 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"Can display recommended articles related to the current article content, 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. Extend custom fields (archiveParams)

The flexible content model of AnQi CMS is a major advantage.If you add custom fields (such as "author{% archiveDetail with name="你的自定义字段名" %}The form of to obtain the value of a specific custom field. If you want to loop through and display 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.tdk标签是设置页面标题（English）Title), keywords (Keywords) and description (Description）的通用工具。你可以通过在head区域使用它，确保每个文章详情页都能拥有独特的、优化的TDK信息。 例如：<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" %}">Also, for specification links(CanonicalUrl），也可以通过tdkTag acquisition and setting, to avoid duplicate content issues.

The art of content presentation: using filters

The autoCMS provides rich filters to make the data display more beautifully and meet the requirements. In addition to the aforementioned|safeand|stampToDateEnglish translations: There are also some common filters that can help you optimize the display of article detail pages:

  • Extract text: |truncatechars:数字or|truncatewords:数字Can be used to extract article abstracts or descriptions to prevent overly 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 to ensure correct display and formatting.
  • Other practical functions: |countCount quantities,|replaceReplace text, etc., and can provide convenience in specific scenarios.

Summary

Through the above method, Safe CMS provides users with great flexibility to customize the display layout of article detail pages.From overall template structure to specific data calls, and to the fine control of SEO elements, you can create a unique and feature-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 experiment with different layouts and label combinations, making your article detail page a major highlight of the website.

Common 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 "Content Management" -u003e "Document Category" in the AnQi CMS backend, edit the category you want to set.category_article_detail.htmlCheck the 'Apply to child categories' option to make this template applicable to all articles under 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 ModelDefine the field name, field call (English), field type, etc.{% archiveDetail with name="你的调用字段名" %}or{% archiveParams %}Tags to call them and display them.

3.