How to customize the overall display template of AnQi CMS?

AnQi CMS provides a flexible and powerful template customization mechanism, allowing you to create a unique website style according to your actual needs.Whether you want to adjust the overall layout or display personalized designs for specific content, Anqi CMS can provide clear paths and rich tools to support your creativity.

One of the core advantages of Anqi CMS is its template engine.It adopts syntax similar to Django and Blade, which allows those familiar with web development to quickly get started.This syntax is intuitive and easy to understand, through{{变量}}to output data, through{% 控制语句 %}To perform conditional judgment or loop, it greatly simplifies the writing process of the template.It is especially worth mentioning that AnQi CMS supports adaptive, code adaptation, and independent PC+mobile site models, which means you can customize the display method that best suits your audience.

Template file organization and structure

In Anqi CMS, all template files are stored in the root directory./templateIn the folder. Each independent template design will have its own dedicated directory, and it will contain aconfig.jsonA file used to define the name, version, author, and other basic information of a template. The static resources required by the template, such as CSS, JavaScript scripts (JS), and images, are stored uniformly./public/static/Catalog, this clear division of responsibilities is helpful for project management and maintenance.

On the organization of template files, Anq CMS provides two main modes: folder organization mode and flattened organization mode. Regardless of which one you choose, there are some default naming conventions, such as:

• HomeIt is usuallyindex/index.htmlorindex.html.
• Document detail pagecan be{模型table}/detail.htmlof which{模型table}Represents the content model you create in the background (such asarticlearticle model).
• Document list pagecan be{模型table}/list.html.
• a single page detail pageIt is usuallypage/detail.html.
• In addition, there are also pages such aserrors/404.html/errors/500.htmltemplates for error pages.

Follow these naming conventions, the system will automatically apply these templates when identifying corresponding pages. This preset structure greatly reduces the麻烦 of manually selecting templates each time a new page is created.

Customization of template at the content level

The template customization capability of Anqi CMS is not limited to the general layout of websites, it also delves into all levels of content management.

Content model and custom fields: AnQi CMS supports a flexible content model, which means you can create different types of content (such as articles, products, events, etc.) based on your business needs and define unique custom fields for each type.These custom fields (such as product parameters, article authors, etc.) can be easily called through specific tags in the template to achieve highly personalized content display.

Categories, document and single page customization templates:This is a very practical feature. Suppose you have a special "About Us" single page that needs a layout completely different from other pages, you can create a named folder in the template directory.page/about.htmlThe file, then edit the "About Us" page in the background management interface, and specify the "Single Page Template" field to beabout.htmlIt can also. Similarly, for article categories or individual documents, you can also specify a template file separately in the "Category Management" or "Document Management" in the background.For example, specify for all documents under a particular categorydetail.htmlOr specify for a particular product detail pageproduct-showcase.htmlThis level of granularity customization makes the display form of content infinitely possible.

Flexible control in the template: tags and filters

The template engine of Anqi CMS is built-in with rich tags and filters, which are the foundation for building dynamic content.

• System tags (system/contact/tdk)Easily allow you to obtain the website name, contact information, SEO information, and other global configurations.
• Navigation tag (navList/breadcrumb)Help you build dynamic menus and breadcrumb navigation.
• Content tag (archiveList/archiveDetail/pageDetail/categoryDetail)It is responsible for retrieving and displaying core content such as articles, products, single pages, categories, etc. from the database.
• Logical control tags (if/for)Provided the ability to make conditional judgments and loop traversal, allowing the template to dynamically generate content based on data.
• Auxiliary tags (include/extends/macro)Supports template modular development, you can extract the common parts such as header and footer into independent files and reference them where needed, which greatly improves the reusability and maintenance efficiency of the template.
• Filter(date/truncatechars/safeetc.)Then you can format, truncate, and safely process variables to ensure that data is presented in **form.

By combining these tags and filters, you can implement highly complex business logic and data display in the template.

Achieve responsive and multi-platform adaptation

For different device screens, Anqi CMS provides a variety of adaptation schemes. You can choose:

1. Adaptive mode:Create a template that adjusts the layout of the website automatically on different devices using CSS media queries and other technologies.
2. Code adaptation mode:Templates are designed for PC and mobile devices respectively, and the system will automatically switch according to the visited device.
3. PC + Mobile Independent Site Mode:This is a more thorough separation, you can set up a separate domain for the mobile site (such as m.example.com), and create it in the root directory of the templatemobileThe subdirectory stores exclusive template files for mobile devices, realizing independent management and display of PC and mobile content.

In summary, Anqi CMS has given users great freedom in website template customization.From choosing the overall framework to the fine adjustment of specific content blocks, to the flexible display of dynamic data, every step has clear and powerful function support.By familiarizing yourself with its template syntax and file organization conventions, combined with the backend content management features, you can easily realize your design ideas and create a website that is both beautiful and practical.

Frequently Asked Questions (FAQ)

1. Ask: If I want to design a completely new website theme from scratch, where should I start?Answer: You can start by creating/templatea new folder under the directory, for examplemythemeand create within itconfig.jsonFile, defines the basic information of a new topic. Next, you need to create the corresponding HTML template files based on the core pages of the website (such as the homepageindex.html, document detail pagearticle/detail.html, list pagearticle/list.html, etc.) and refer to the files you have/public/static/mythemeResources placed below.

2. Can I apply a unique template to a single article or page, rather than having it follow the default template of its category?Of course you can. Edit the content item you want to personalize in the background management interface under 'Document Management', 'Page Management', or 'Category Management'.In the editing page, there will be a field for "Document Template", "Single Page Template", or "Category Template", where you can enter the template filename you have designed specifically for this content item (for examplespecial-article.htmlorabout-us-page.html), the system will prioritize using the template you specified.

3. **Question: After uploading a new template file, the website's front