AnQiCMS provides a very flexible and powerful content management system, allowing us to easily customize the display layout of article detail pages.Whether it is to improve 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.

So, how should we operate specifically? We can delve into these aspects step by step.

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/templateThe 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{{变量}}Output the variable, using single curly braces and the percent sign.{% 标签 %}Process conditional judgments, loop controls, and other logical operations.

AnQiCMS will search for template files in a certain priority when rendering the article detail page:

  • 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.
  • Customization for a specific article ID:If you need to design a unique layout for a specific article (such as an article with ID 10), you can create a layout namedarticle/detail-10.htmlThe template file. The system will prioritize using this more specific template.
  • Customize through the backend settings:AnQiCMS provided a more flexible way.When publishing or editing articles, you can find the 'Document Template' field in 'Other Parameters'.my_special_article.html）。The system will look for and use this file in the directory./template/{你的模板目录}/directory to find and use this file.
  • Customization through category settings:Further more, you can also specify a unified detail page template for all articles under a certain category.In the document classification management interface, when editing a category, you can set 'Document Template' in 'Other Parameters', and even choose whether to apply it to subcategories.So, all articles under this category and its subcategories will be displayed according to this template.

These flexible template options provide us with great freedom to customize article detail pages.

2. Backend configuration: Build content and data

Before starting to write template code, it is very important to prepare the content structure and data we need in the AnQiCMS background.

  • Flexible content model:One of the core highlights of AnQiCMS is the 'flexible content model'.In addition to the default article and product models provided by the system, we can customize new content models based on business requirements and add exclusive "custom fields" to each model.For example, if we add fields such as 'article author', 'article source', etc. 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 documents:When adding a document or editing an existing document, we need to make full use of these fields.For example, in addition to the conventional article title, summary, and content, we can also upload thumbnails, set related Tag tags, fill in a custom URL, and pay special attention to the 'Document Template' field mentioned earlier, where you can select or enter the custom template path you have prepared for the current article.
  • Category management document template settings:As previously mentioned, 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 unified style for specific content blocks (such as news, cases, blogs, etc.).

3. Front-end template writing: Implement beautiful layout

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

  • Structured template: Inheritance and inclusion通常，一个网站会有公共的头部、底部和侧边栏。我们可以利用 Englishextendsandinclude标签来构建模块化的模板： English

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

  • to call the core content of the articleIn the article detail page template, the most critical part is how to obtain and display the current article's data.archiveDetailTags are our main tool: `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