How to customize the Anqi CMS template to meet the unique layout requirements of the website content?

In the digital age, a unique and functional website layout is the core element to attract users and convey brand information.AnQiCMS (AnQiCMS) is an enterprise-level content management system based on Go language, with its efficient and customizable features, it provides users with great flexibility, allowing you to easily build websites that meet specific content layout requirements.

Take full advantage of the powerful capabilities of AnQi CMS, custom templates are the key to personalized design.This not only involves visual beauty, but also concerns how to organize and display your website content efficiently.

Understanding the Anqi CMS template mechanism

The template design of AnQi CMS borrows the syntax of Django template engine, which makes the learning curve relatively smooth. Template files are suffixed with.htmland stored uniformly in the root directory./templateIn the folder. It is recommended to keep the accompanying styles (CSS), JavaScript scripts, and images, etc., in a separate location./public/static/Directory, maintain the purity and manageability of the template file.

In AnQi CMS, variables are usually enclosed in double curly braces.{{变量}}Print, while logical tags such as conditional judgment and loop control use single curly braces and percent signs.{% 标签 %}To define, and most often need corresponding end tags. This clear syntax structure makes the logic of the template clear.

The system also supports various template types, including adaptive (responsive) templates, code adaptation templates, and PC + mobile independent site modes. If you choose the latter two modes, you can create them in the template root directory.mobileSubdirectory, design independent template files for mobile end, to achieve finer device adaptation.

Core customization points: from content to layout

Custom templates are not just about changing colors and fonts, but also about how to flexibly manage and display content.AnQi CMS provides multi-level customization entries, allowing your website layout and content to be deeply integrated.

1. Content model and custom fields: The content on the website is diverse, ranging from traditional articles, news updates to product displays, case studies, and their structures are often different.The AnQi CMS allows you to customize content models according to your business needs and add exclusive custom fields for each model.For example, if you want to display a product, in addition to the title and content, you may also need fields such as "product model", "color", "price", etc.After defining these fields in the background, you can use them in the template,archiveParamsEasily retrieve and render these custom data, achieving a unique customized layout for the product detail page.This greatly expands the expressiveness of the content, allowing each type of information to be presented in the most appropriate way.

2. Category and Single Page Template:Sometimes, you may want a specific category (such as the 'Download Center') or an independent single page (such as 'About Us') to have a layout and visual style completely different from other pages.The AnQi CMS provides the functionality to specify a custom template for a single category or single page.You just need to create a file in the template directory with a specific naming convention, such as creating a document for ID 10{模型table}/10.htmlOr create a category with ID 1{模型table}/list-1.htmlOr even create a single pagepage/about-us.htmlThen specify the use of the template file in the background content management or page management.This way, you can design a dedicated display page for the key part of the website, meeting the needs of highly customized layouts.

3. Customize system and contact information:General information of the website, such as the website name, Logo, filing number, copyright information, and contact information (phone, address, email, social media links, etc.), can all be centrally managed through the background. You can use it in the template.systemTags andcontactTags conveniently call up this information. Furthermore, you can also add custom parameters in the background system settings and contact information settings to provide more globally callable information for the template, such as special promotional slogans or partner lists. You can update the common content of the website without modifying the code.

Master template tags, fine control content

AnQi CMS provides rich template tags, which are the bridge connecting website content with front-end layout. Proficiently using them will make your template customization work twice as efficient.

1. Data call: Rich and diverse tags:

   • Content list and details: archiveListandarchiveDetailA powerful tool for processing core content such as articles, products, etc.archiveListYou can flexibly display content lists based on category ID, model ID, recommendation attributes, sorting methods, and other conditions, and support pagination.archiveDetailIt is used to display detailed information of a single content, including its custom fields.
   • Categories and pages: categoryListUsed to display the category hierarchy,categoryDetailGet the details of a single category.pageListandpageDetailIt is used for the display on a single page.
   • Site general information: systemTags call the website name, Logo, basic URL, and other global settings.contactLabels are used to output contact information such as phone numbers, email addresses, and more.tdkTags help you dynamically set the Title, Keywords, and Description required for SEO on different pages.
   • Navigation and friendly links: navListCan flexibly build multi-level website navigation menus.linkListIt is used to display friend links.

2. Logic and loops: Build dynamic layout:

   • Conditional judgment: if/elif/elseTags make the template able to display or hide content blocks based on different conditions.For example, you can set the image to be displayed only when there is an article thumbnail, or display different menu items after the user logs in.
   • Loop traversal: forThe loop tag is the core for handling list data. Whether it's an article list, category list, or multiple contents in a custom field, it can be displayed one by one throughforcoordinated.forloop.Counter(Current loop count),forloop.Revcounter(Remaining loop count) and other variables, it can also implement more complex layouts, such as adding special styles to the first or last element.

3. Modularization and reuse: Enhance development efficiency:

   • Template inheritance: extendsTags allow you to define a basic layout file (usuallybase.html), which includes the common structure of the website (such as header, footer, sidebar). Other page templates simply inherit this basic layout and fill or override specific content blocks (block), greatly improved the development efficiency and maintenance convenience.
   • The code snippet includes: includeLabels can isolate commonly used UI components or code snippets (such as headers, footers, sidebars) into separate files and then import them where needed.This helps to avoid code repetition, making the template structure clearer.
   • Macros: macroThe tag allows you to define reusable functional code blocks, which can accept parameters and generate specific HTML structures, especially suitable for components that repeat but have slightly different content.

4. Advanced feature: SEO and user interaction:

   • paginationTags are used to build pagination functionality for article lists.
   • guestbookTags can generate message forms, making it convenient for users to consult online.
   • archiveFiltersUsed to filter the list according to document parameters, in product display or