How to create a custom template for AnQiCMS website to achieve personalized display?

AnQiCMS with its flexible and efficient features provides a wide space for personalized display of website content.If you want your website to have a unique appearance and features, creating a custom template is undoubtedly **the way**.By deeply customizing the template, you can fully control every detail of the website, from brand image to user experience, achieving a high degree of personalization, and standing out among many websites.

This article will guide you to understand how to create and apply custom templates in AnQiCMS, helping you turn your design concepts into reality and realize the personalized display of the website.

The foundation of template customization: Understand AnQiCMS template mechanism

In AnQiCMS, the core of template customization lies in understanding its template engine based on the Go language, which borrows syntax similar to Django templates, making it easy for users familiar with web development to quickly get started.

First, the template files should be used uniformly.htmlas suffixes, and stored centrally in the root directory of the website/templateIn the folder. Resources such as stylesheets, JavaScript scripts, and images related to the template should be placed separately in/public/static/Under the directory. This separation helps keep the template files neat and convenient for managing static resources.

AnQiCMS's template syntax is concise and powerful:

• Variable outputUse double curly braces{{变量名}}to display data, for example{{archive.Title}}can display article titles.
• Logical controlUse single curly braces and percent signs{% 标签 %}Perform logical operations, such as conditional judgments{% if 条件 %}Loop traversal, such as{% for item in 列表 %}All logical tags need corresponding end tags, for example{% endif %}or{% endfor %}.
• Variable naming: To maintain consistency, the variable names in the template usually adopt camel case naming rules, that is, the first letter of each word is capitalized (such asarchive.Id,archive.Title)
• Coding specificationsAll template files should be encoded in UTF-8 to avoid garbled text on the page.

Each custom template should contain one in its root directory.config.jsonA file used to describe the basic information of a template, such as template name, package name, version, author, etc. among which,template_typeThe field is particularly important, it defines the adaptation type of the template (0 for adaptive, 1 for code adaptation, 2 for independent computer + mobile), which determines how your website responds to visits from different devices.

Step 2: Create your first custom template

Creating a custom template is a systematic process, every step from planning to writing the specific files is crucial.

1. Planning and Preparation

Before starting to write code, it is recommended that you first clarify the display requirements of the website:

• Website TypeIs it a corporate website, a product showcase, or a blog?
• Adaptation MethodDo you need responsive design (adaptive), provide different code (code adaptation) for different devices, or deploy independent templates for PC and mobile separately?
• Page structure：What core pages are included on the website (home page, article list, detail, single page, etc.), as well as their approximate layout.

According to your plan,/templateCreate a new folder under the directory as your template directory, for examplemy_custom_theme. Then, create a file in this new folderconfig.jsonand fill in the relevant information.

2. Core page template setup

AnQiCMS supports two template file organization modes: folder organization mode and flattened file organization mode. Regardless of which one you choose, here are some naming rules for template files of core pages:

• Public code snippetsTo avoid code repetition, you can split the header, footer, sidebar, and other common parts into independent files, for examplepartial/header.html/partial/footer.html. These files can be referenced by{% include "partial/header.html" %}tags in other templates.
• Basic Skeleton: Create abase.htmlfile as the basic skeleton for all pages. In this file, define the basic structure of the HTML document (<html>,<head>,<body>) as well as common styles and script references. Use{% block 区域名称 %}{% endblock %}tags to define content areas that can be rewritten or extended by child templates. For example, you can define{% block title %}/{% block content %}etc.
• Home:index/index.html(folder mode) orindex.html(Flat mode). This is the entry page of the website, which usually displays the latest articles, recommended content, carousel images, etc.
• Model list page: For example, the article list pagearticle/list.htmlorarticle_list.html, Product list pageproduct/list.htmlorproduct_list.htmlThese pages are used to display a list of specific content models.
• Model detail pageFor example, article detail pagearticle/detail.htmlorarticle_detail.htmlProduct detail pageproduct/detail.htmlorproduct_detail.htmlThese pages are used to display the detailed content of a single article or product.
• single page:page/detail.htmlorpage_detail.htmlSuitable for static content pages such as 'About Us' and 'Contact Us'.
• Mobile end templateIf yourtemplate_typeSet to 1 or 2, you need to create a subdirectory in the template directorymobile/and create a mobile adaptation template file with the same structure within it.

Reference static resourcesIn your template file, when referencing CSS, JavaScript files or images, you should use the AnQiCMS provided{templateUrl}Variables are used to construct the correct path. For example:<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet"> <img src="{% system with name="TemplateUrl" %}/images/logo.png" alt="Logo"> {% system with name="TemplateUrl" %}It will automatically be replaced with the root path of the static resources of the current template, ensuring that the resources can be loaded correctly.

Chapter 3, Flexible Use of AnQiCMS Template Tags and Filters

AnQiCMS provides rich template tags and filters, allowing you to easily retrieve and process various data.

1. Data acquisition and display

• Site global information: Use.{% system with name="字段名称" %}Label to obtain website name, Logo, filing number, basic URL, etc.
• Contact Information: Pass{% contact with name="字段名称" %}Label to obtain backend configured contact, phone, email, social media links, etc.
• Navigation list:{% navList navs %}Used to retrieve website navigation menu data, supporting multi-level menus and custom navigation categories.
• Categories and documents:
  • {% categoryList categories %}: Retrieve article or product category list.
  • {% archiveList archives %}: Retrieve a list of articles or product documents, supporting multiple conditions such as category, model, recommended attributes, sorting methods, and pagination functionality.
  • {% pageList pages %}: Retrieve a single-page list.
  • {% archiveDetail with name="字段名称" %}Get detailed information of the current document on the detail page (such as title, content, images, custom fields, etc).
  • {% pageDetail with name="字段名称" %}Get detailed information of a single page.
• Model custom fieldsIf your content model defines additional fields, you can usearchiveDetailorcategoryDetail