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, allowing you to easily create unique and stylish pages without deep programming.

Let's explore how to bring your design concept to life in Anqicms.

Anqicms template overview

Before starting the custom journey, understanding some basic conventions of the Anqi CMS templates will be very helpful. All template files are stored in the root directory of the website./templateIn the folder, while the styles (CSS), JavaScript scripts, and images, etc., static resources used by the template are placed uniformly in/public/static/Directory.

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

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

All template files use UTF-8 encoding to ensure correct display of content. Additionally, Anqi CMS supports various website modes, including adaptive, 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/In the subdirectory.

Core: Understand the structure and naming conventions of template files

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

The AnqiCMS supports two template organization modes: folder organization mode and flat file organization mode. Whichever one you choose, there are some conventions for default template files:

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

The power of custom templates:

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

  • If you have an article with ID 10 and want a custom layout, you can create a namedarticle/detail-10.htmltemplate.
  • If there is a product category with ID 5, 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 when creating the single page in the background, set it to the "Single Page Template".about.html.

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

Customize article and product detail page template

Articles and products are all classified as "documents" in Anqi CMS, and they share a flexible content model system.

  1. Create a custom field (if needed):Many times, the default title, content, and other fields may not be enough to display all the information you need.For example, a product may require fields such as "model", "brand", "technical parameters", etc., while an article may require fields such as "author source", "publishing organization", etc.You can enter the backendContent management > Content modelEdit or add a model, then add custom fields to the model.This supports single-line text, numbers, multi-line text, radio buttons, checkboxes, dropdown selections, and various 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 named section in the 'Other Parameters' part of the editing interface“Document Template”The field. Here, you can enter the custom template filename that you have created for this specific document, for examplearticle_special_layout.htmlorproduct_showcase.htmlMake sure that this template file actually exists in your template directory.

  3. Call data in the template:In a custom detail page template (for examplearticle/detail.htmlor custom by youarticle_special_layout.html), you can use various tags to retrieve content.

    • Basic content:
      • Article/Product Title:{{archive.Title}}
      • Article/Product Content:{{archive.Content|safe}}(Note here that|safeA filter that ensures HTML code is parsed correctly instead of being escaped)
      • Thumbnail:<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />
      • Published time:{{stampToDate(archive.CreatedTime, "2006-01-02")}}
      • 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 in the following way:
      • Directly call: `{% archiveDetail with name="