How to customize the template layout of article, product, and category pages?

In AnQi CMS, flexibly customizing the page template layout is a key step to enhance website personalization and user experience.Whether it is an article, product detail page, or category list page, Anqi CMS provides powerful and intuitive tools that allow you to easily create pages with a unique style without delving into programming.

Let's explore how to turn your design concept into reality in AnQi CMS.

Overview of AnQi CMS Template

Before starting your custom journey, it is very helpful to understand some basic conventions of the security CMS template. All template files are stored in the root directory of the website./templateIn the folder, while the styles (CSS), JavaScript scripts, and images as static resources used by the template are placed uniformly./public/static/directory.

The template syntax of Anqi CMS is concise and efficient, similar to the style of Django template engine. You will encounter two main tags:

  • Double curly braces{{变量}}: is used to output variables or data.
  • Single curly braces and percentage signs{% 标签 %}：Used to implement logic control, such as conditional judgment (if)、loop (for) and calling specific function tags.

All template files are encoded in UTF-8 to ensure correct display of content. In addition, Anqi CMS supports various website modes, including responsive, code adaptation, and PC+mobile independent site modes, which means you can create separate templates for mobile content, which are usually stored in the template directory.mobile/subdirectory.

核心：Understanding Template File Structure and Naming Conventions

To customize the page layout, you first need to master the location and naming rules of the template files. Each set of templates are/templateEnglish has its own independent directory, which contains aconfig.jsonfile used to describe the basic information of the template.

Auto CMS supports two template organization modes: folder organization mode and flattened file organization mode. No matter which one you choose, there are some conventional default template files:

  • Home Page：It is usuallyindex/index.htmlorindex.html.
  • Model homepage (such as article or product list homepage): {模型table}/index.htmlor{模型table}_index.html.
  • Document (article/product) details page: {模型table}/detail.htmlor{模型table}_detail.html.
  • Document (article/product) list page (category page): {模型table}/list.htmlor{模型table}_list.html.
  • Single Page Details Page： page/detail.htmlorpage.html.

The power of custom templates:

In addition to these default names, the most powerful feature of Anqi CMS is its flexible custom template naming capability.This means you can specify a unique template file for a specific article, product, or category page.

  • If you have an article with ID 10 and want a custom layout, you can create one namedarticle/detail-10.htmltemplate.
  • If there is a product category with ID 5, and you want its list page to be different, you can createproduct/list-5.html.
  • For a single page like "About Us", you can design apage/about.htmlTemplate, and create the single page in the background, and set its 'Single Page Template' toabout.html.

Next, we will explain in detail how to use these capabilities in modules.

Customized article and product detail page template

Articles and products in Anqi CMS are both categorized as 'documents', and they share a flexible content model system.

  1. Create custom fields (if needed):Many times, the default title, content, and other fields may not be enough to display all the information you need.For example, the product may require fields such as "model", "brand", "technical parameters", etc., and the article may require fields such as "author source", "publishing organization", etc.Content Management > Content ModelEdit or add a model, and then add custom fields to the model.Here supports single-line text, numbers, multi-line text, single selection, multiple selection, dropdown selection, and many other field types.These custom fields will greatly enrich your content display capabilities.

  2. Specify the template in the background:When you edit or publish a new article or product, you will find a section named in the "Other Parameters" part of the editing interface"Document Template"The field. Here, you can enter the custom template filename you created for this specific document, for examplearticle_special_layout.htmlorproduct_showcase.htmlMake sure that this template file actually exists in your template directory.

  3. In the template, call data:In the custom detail page template (such asarticle/detail.htmlor a custom onearticle_special_layout.html), you can use various tags to retrieve content.

    • Basic content:
      • Article/product title:{{archive.Title}}
      • 文章/产品内容：English{{archive.Content|safe}}(注意这里的English)|safe过滤器，它能确保HTML代码被正确解析而不是转义显示English
      • Thumbnail:<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />
      • Post Time:{{stampToDate(archive.CreatedTime, "2006-01-02")}}
      • Number of views:{{archive.Views}}
    • Custom field:If your content model defines additional fields (for example, if you add a field namedproduct_modelproduct model field), you can call it as follows:
      • Directly call: `{% archiveDetail with name="