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

AnQiCMS provides a very flexible and powerful content management system, allowing us to easily customize the display layout of article detail pages.In order to enhance user experience, optimize SEO, or better showcase the brand characteristics, AnQiCMS can help us achieve these goals through its intuitive template system and rich tag functions.

How to operate specifically? We can delve into it step by step from the following aspects.

1. Understand the template mechanism of AnQiCMS

Firstly, we need to understand how AnQiCMS identifies and renders the article detail page. All template files are stored in/templateUnder the directory, and static resources (such as CSS, JS, images) are located/public/static/Directory. AnQiCMS uses a syntax similar to Django template engine, using double curly braces{{变量}}To output variables, use single curly braces and percent signs{% 标签 %}To handle conditional judgment, loop control, and other logic.

AnQiCMS will look for template files according to a certain priority when rendering article detail pages:

• Default article detail template:All article detail pages usually use/template/{你的模板目录}/{模型table}/detail.htmlas the default template. For example, if you are using the "article model", the default template path isarticle/detail.html.
• customized for a specific article ID:If you need to design a unique layout for a special article (such as an article with ID 10), you can create a namedarticle/detail-10.htmlThe template file. The system will prioritize using this more specific template.
• Customize through the backend settings:AnQiCMS provides a more flexible way. When publishing or editing articles, you can find the 'Document Template' field in 'Other Parameters'.Here, you can directly enter a custom template filename (such asmy_special_article.html）。The system will look for and use this file in/template/{你的模板目录}/the directory.
• Customize through category settings:Further, you can also specify a unified detail page template for all articles under a certain category.In the document classification management interface, when editing categories, you can set the document template in the 'Other Parameters', and even choose whether to apply it to subcategories.This category and all subcategories' articles will be displayed according to this template.

These flexible template specification methods provide us with great freedom to customize the article detail page.

2. Backend configuration: build content and data

Before starting to write template code, an important step is to prepare the required content structure and data in the AnQiCMS backend.

• Flexible content model:One of the core highlights of AnQiCMS is the flexible content model.In addition to the default article and product models of the system, we can customize new content models according to business needs and add exclusive "custom fields" to each model.For example, if we add fields such as 'article author' and 'article source' to the article model, then the data of these fields can be called and displayed on the article detail page, greatly enriching the content dimension.
• Fill in the content when publishing the document:When adding a document or editing an existing document, we need to make full use of these fields.For example, in addition to the usual article title, abstract, and content, we can upload thumbnails, set related Tag tags, fill in custom URLs, and especially pay attention to the "document template" field mentioned earlier, where you can select or fill in the custom template path prepared for the current article.
• Document template settings in category management:As mentioned before, if you want all articles under a certain category to use a specific detail page layout, you can edit the category in the 'Document Category', then specify the 'Document Template' in the 'Other Parameters', and choose whether to apply it to subcategories.This is very effective for maintaining a consistent style in specific content blocks (such as news, cases, blogs, etc.)

3. Front-end template writing: Implement beautiful layout

Once the background data and template path are ready, we can start writing the front-end template code.AnQiCMS's template system is based on the powerful capabilities of Go language and is easy to learn.

• Structuring of the template: Inheritance and inclusionIn general, a website has a common header, footer, and sidebar. We can make use ofextendsandincludetags to build modular templates:

  • {% extends 'base.html' %}Inbase.htmlDefine the basic framework of the website (such as HTML structure, introducing CSS/JS, common header and footer), and through{% block content %}Tags define areas that can be overwritten. The article detail page template can inherit.base.htmlOnly focus oncontentthe layout of the part.
  • {% include 'partial/header.html' %}: For some small reusable code snippets (such as navigation bars, contact information), you can useincludetag introduction to keep the code neat

• to call the core content of the articleIn the article detail page template, the core issue is how to obtain and display the data of the current article.archiveDetailTags are our main tools: "`twig"

  <h1>{% archiveDetail with name="Title" %}</h1> {# 显示文章标题 #}
  <div class="article-meta">
      <span class="category">分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
      <span class="pub-date">发布时间：{% archiveDetail with name="CreatedTime" format="2006-01-02 15:04" %}</span>
      <span class="views">阅读量：{% archiveDetail with name="Views" %}</span>
      <div class="tags">
          {% tagList tags with itemId=archive.Id limit="10" %} {# 调用当前文章的标签 #}
          {% for item in tags %}
              <a href="{{item.Link}}">{{item.Title}}</a>
          {% endfor %}
          {% endtagList %}
      </div>
  </div>
  <div class="article-content">
      {%- archiveDetail articleContent with name="Content" %}
      {{ articleContent|safe }} {# 输出文章内容，|safe 确保HTML标签被正确解析 #}
  </div>
  {# 如果文章内容是Markdown格式，且需要在前端渲染，可以使用render过滤器 #}
  {# {{- archiveDetail articleMarkdownContent with name="Content" render=true %}}
     {{ articleMarkdownContent|safe