How to customize templates in AnQiCMS to change the overall visual style and layout of the website?

In today's era, where brand and user experience are emphasized, the visual style and layout of a website are key to its successful operation.AnQiCMS (AnQiCMS) fully understands this point, therefore it provides highly flexible template customization features, allowing users without a strong development background to create personalized websites according to their unique needs.

If you are considering changing the overall style of the website or designing a dedicated layout for specific content, it will be very helpful to understand how to customize templates in AnQiCMS.This can make your website stand out among many competitors, and it can effectively improve user experience, conveying unique brand information.

Understand the template mechanism of AnQiCMS

The Anqi CMS template system is designed to be quite intuitive and efficient, it uses syntax similar to the Django template engine, which is very easy to get started with for users familiar with web development.

First, all template files are uniformly stored in the root directory of the site/templateIn the folder. Each independent template needs to have its own subfolder in this directory.The static resources such as images, CSS styles, JavaScript scripts, and so on required by the template will be placed in one place/public/static/directory.

In the template files, you will find two main syntax structures:

• Variable output: Using double curly braces{{变量}}To display data, such as article titles{{archive.Title}}.
• Logical controlUse single curly braces and percentages{% 标签 %}To implement conditional judgment (such asif), Loop traversal (such asfor）Complex logic. Such tags usually require a corresponding closing tag (for example{% endif %}or{% endfor %}）to complete a code block.

In addition, to ensure the correct display of website content, all template files should be encoded in UTF-8 format.

Create and activate your custom template

The best way to start customizing a template is to start from an existing template (such as the default system template).

1. Copy an existing template: Enter/templateDirectory, find a template folder that is close to your needs (for exampledefault), then make a complete copy of it and name the new folder something distinctive, likemy_custom_theme.
2. Configurationconfig.json: Enter the newly createdmy_custom_themefolder, and you will see aconfig.jsonFile. This file is the 'ID card' of the template, telling AnQiCMS about the basic information of this template. You need to edit it, focusing on the following fields:
   • "name"Template display name, for example"我的定制主题".
   • "package"Template identifier, usually consistent with your folder name, for example"my_custom_theme". The name can only contain letters and numbers.
   • "template_type"This determines how your website adapts to different devices. You can choose0Adaptive template (a set of templates that adapt to all devices),1represents code adaptation (providing different HTML on the server side based on the device type), or2represents a computer + mobile independent template (a separate mobile template needs to be made).
   • "status": Used to indicate that the template is in use,0is disabled,1is in use. Please note that only one template can be used at a time.statusWith1However, you can also switch templates directly in the background, and the system will automatically update this status.
3. Activate in the background: Completeconfig.jsonAfter modification, log in to the AnQiCMS backend, find the "Template Design" menu under "Website Template Management".Here, you should see the new template you just created. Click the 'Enable' button next to it, and your website's front end will immediately switch to this new template.

Explore the directory structure of the template files

AnQiCMS's template file organization is very flexible, you can use folder mode or flattened mode to manage your template files.Regardless of which, there is a set of default naming conventions that allow the system to automatically recognize and apply the corresponding template.

Common template files and directories include:

• bash.html: Used to store the common parts of a website, such as the header (head), footer (footer) and other code.
• partial/The directory: stores some reusable code snippets, such as sidebars, breadcrumb navigation, etc., through{% include "partial/sidebar.html" %}such tags can be introduced.
• index/index.htmlorindex.htmlThis is the home page template of the website.
• {模型table}/index.htmlor{模型table}_index.htmlThe list page or home page of a specific content model (such as an article, product).
• {模型table}/detail.htmlor{模型table}_detail.htmlThe detail page of a specific content model. For example, an article detail page might be.article/detail.html.
• {模型table}/list.htmlor{模型table}_list.html: List page under a specific content model category.
• page/detail.htmlorpage.html: Single page detail page, such as 'About Us', 'Contact Us', etc.
• mobile/Directory: If you have chosen the "Code Adaptation" or "PC+Mobile Independent Site" mode, all the template files corresponding to the mobile end will be stored here, with a structure similar to the PC template.

It is worth mentioning that AnQiCMS also supports more refined template customization. For example, you can create a dedicated template for documents, categories, or single pages with specific IDs, named in a manner like{模型table}/{文档id}.html/{模型table}/list-{分类id}.htmlorpage/{单页面id}.html. When publishing content in the background, you can also specify the custom template filename to be used.

Use AnQiCMS tags to make content lively.

The core of the template lies in dynamically displaying website content and configuration information through tags and variables.AnQiCMS provides rich built-in tags, which are powerful tools for building dynamic websites.

1. Get global information of the website

   • {% system with name="SiteName" %}: Easily obtain the website name, Logo, filing number, copyright information, etc., which are usually used in the header or footer.
   • {% contact with name="Cellphone" %}Display the website's contact phone number, address, email, social media accounts, etc., for easy user contact.
   • {% tdk with name="Title" %}To generate dynamic SEO titles, keywords, and descriptions for a page is crucial for search engine optimization. For example, by{% tdk with name="Title" siteName=true %}The current page title can be combined with the website name to display.

2. Build flexible navigation and structure

   • {% navList navs %}: Retrieve and display the website's navigation menu, supporting multi-level navigation. You can useforLoop throughnavsvariables to build your menu structure, by{{item.Link}}and{{item.Title}}generating navigation links.
   • {% breadcrumb crumbs %}Generate the breadcrumb navigation of the website, enhance user experience and clarity of website structure.

3. Dynamic content display

   • {% archiveList archives with type="page" categoryId="1" limit="10" %}: Retrieve article or product list. This is one of the most commonly used tags, and you can filter content based on categories, models, recommended attributes, sorting methods, and other conditions. Whentype="page"you can combine with{% pagination pages %}Tags implement pagination functionality.
   • {% archiveDetail with name="Title" %}In the detail page, directly obtain the detailed information of the current article or product, such as title, content, thumbnail, publication time, etc. For the content fieldContentIt usually needs to be added|safeFilter{{archiveContent|safe}}to ensure that the HTML code is parsed correctly and not displayed as escaped.
   • {% pageList pages %}and{% pageDetail with name="Title" %}are used to get the list of single pages and the details of a single page, usage is similar toarchiveList/archiveDetailSimilar.

4. Implement advanced logic and code reuse

   • {% if 条件 %} ... {% elif 其他条件 %} ... {% else %} ... {% endif %}: Perform conditional judgment, displaying different content based on different situations.
   • {% for item in 列表 %} ... {% endfor %}: Loop through arrays or lists to dynamically generate repeated content blocks.
   • {% include "partial/header.html" %}: Introduce other template files to achieve code reuse and make the template structure clearer. You can also pass specific variables to the imported template bywithPass parameters to the imported template to pass specific variables.
   • `{%