In today's era, where brand and user experience are emphasized, the visual style and layout of a website are the key to its successful operation.AnQiCMS (AnQiCMS) knows this and therefore provides highly flexible template customization features, allowing users with no deep development background to create websites that meet their unique needs and are full of personalization.
If you are considering changing the overall style of the website or want to design a dedicated layout for specific content, understanding how to customize templates in AnQiCMS will be very helpful.This can not only make your website stand out among many competitors, but also effectively improve the user experience and convey unique brand information.
Understanding the template mechanism of AnQiCMS
The template system of Anqi CMS is designed to be quite intuitive and efficient, it adopts syntax similar to the Django template engine, which will be very easy for users familiar with web development to get started with.
Firstly, all template files are stored in the root directory of the site./templateIn the folder.Each independent template requires its own subfolder in this directory./public/static/In the directory.
In the template files, you will find two main syntax structures:
- Variable output: Use double curly braces
{{变量}}Display data, such as article titles{{archive.Title}}. - Logical control：Use single curly braces and percentage signs
{% 标签 %}To implement conditional judgment (such as)if), loop traversal (such as)for) and other complex logic. These tags usually need a corresponding end tag (such as){% endif %}or{% endfor %}）to complete a code block.
In addition, to ensure the correct display of website content, all template files should use UTF-8 encoding format.
Create and activate your custom template
Want to start customizing templates? The best way is to start from existing templates (such as system default templates).
- Copy existing templates: Enter
/templateIndex, find a template folder that you think is close to your needs (for exampledefault) Then make a complete copy of it, and give the new folder a distinctive name, such asmy_custom_theme. - Configuration
config.jsonEnter the newly createdmy_custom_themeFolder, 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"：Unique identifier for the template, usually consistent with your folder name, for example"my_custom_theme". This name can only contain letters and numbers."template_type"This determines how your website adapts to different devices. You can choose0Stands for adaptive 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 separate template for computer and mobile (a mobile template needs to be created separately)."status"English for indicating whether the template is in use,0为未启用，1is in use. Please note that only one template can be used at a time.statusresponse for1. However, you can also switch templates directly in the background, and the system will automatically update this status.
- Activate in the background: Completed
config.jsonModify it, log in to the AnQiCMS backend, and 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 files are very flexible, you can use folder mode or flat mode to manage your template files.No matter which one, there is a set of default naming conventions that allow the system to automatically identify and apply the corresponding template.
Common template files and directories include:
bash.html: Typically used to store the public parts of a website, such as the header that all pages inherit,headFooterfooter) and other code.partial/Directory: Stores reusable code snippets, such as sidebars, breadcrumb navigation, etc., through{% include "partial/sidebar.html" %}such tags can be introduced.index/index.htmlorindex.html: The home page template of the website.{模型table}/index.htmlor{模型table}_index.html：The list page or homepage of a specific content model (such as articles, products).{模型table}/detail.htmlor{模型table}_detail.html：The detail page of a specific content model. For example, an article detail page might bearticle/detail.html.{模型table}/list.htmlor{模型table}_list.html：Specific content model category list page.page/detail.htmlorpage.html：Single page detail page, such as 'About Us', 'Contact Us', etc.mobile/Directory: If you selected the 'Code Adaptation' or 'Computer + Independent Mobile Site' mode, all mobile-end corresponding template files will be stored here, which have a similar structure to PC-end templates.
It is worth mentioning that AnQiCMS also supports more fine-grained template customization. For example, you can create a dedicated template for documents, categories, or single pages with a specific ID, named as{模型table}/{文档id}.html/{模型table}/list-{分类id}.htmlorpage/{单页面id}.htmlIn the background, you can also specify the custom template filename to be used.
Use AnQiCMS tags to make the content come alive
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 your tools for building dynamic websites.
Get the 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" %}Show the website's contact phone number, address, email, social media accounts, etc., for easy user contact.{% tdk with name="Title" %}English: To generate dynamic SEO titles, keywords, and descriptions for the page is crucial for search engine optimization. For example, through{% tdk with name="Title" siteName=true %}You can combine and display the current page title and the site name.
Build flexible navigation and structure
{% navList navs %}: Retrieve and display the website's navigation menu, supporting multi-level navigation. You can useforto iteratenavsvariables 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 the website structure.
Dynamic display of content
{% 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 various conditions such as category, model, recommended attributes, and sorting methods.type="page"you can combine with{% pagination pages %}Tag implementation of pagination function.{% archiveDetail with name="Title" %}: In the detail page, directly obtain the detailed information of the current article or product, such as the title, content, thumbnail, publish time, etc. For the content fieldContentEnglish|safeFilter{{archiveContent|safe}}English{% pageList pages %}and{% pageDetail with name="Title" %}EnglisharchiveList/archiveDetailsimilar.
Implement advanced logic and code reuse
{% if 条件 %} ... {% elif 其他条件 %} ... {% else %} ... {% endif %}: Make conditional judgments, 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 through parameters.withParameters can pass specific variables to the imported template.- `{%