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

To fully utilize the powerful capabilities of AnQi CMS, customizing templates is the key to achieving personalized design.This not only involves visual beautification, but also concerns how to efficiently organize and display your website content.

Understanding the AnQi CMS template mechanism

The template design of AnQi CMS borrows the syntax of Django template engine, which makes its learning curve relatively gentle. The template files are saved with the.htmlextension and are stored in the root directory./templateIn the folder. The accompanying styles (CSS), JavaScript scripts, and other static resources are recommended to be stored separately./public/static/Catalog, maintain the purity and manageability of template files.

In Anqi CMS, variables are usually denoted with double curly braces.{{变量}}Output, and logic tags such as conditional judgment and loop control use single curly braces and percent signs{% 标签 %}Define, and most need corresponding end tags. This clear syntax structure makes the logic of the template clear at a glance.

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 in the template root directory.mobileSubdirectory, design independent template files for mobile devices to achieve finer device adaptation.

Core customization points: from content to layout

Custom templates are not just about modifying colors and fonts; the deeper customization lies in how to flexibly manage and display content.The AnQi CMS provides multi-level customization options, allowing your website layout and content to deeply integrate.

  1. Content model and custom fields:The content on the website is diverse, ranging from traditional articles, news updates to product displays and case sharing, with varying structures.The Anqi CMS allows you to customize content models according to your business needs and add exclusive custom fields to 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', and 'price'.archiveParamsEasily retrieve and render these custom data, achieving a unique customized layout for the product detail page.This greatly expands the expressiveness of content, allowing each type of information to be presented in the most appropriate way.

  2. Categories and single-page templates:Sometimes, you may want a specific category (such as 'Download Center') or a standalone 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 custom templates for individual categories or single pages.{模型table}/10.htmlor create a category with ID 1{模型table}/list-1.htmleven create a single page for itpage/about-us.htmlThen specify the use of the template file in the background content management or page management.This way, you can design exclusive display pages for the key parts of the website, meeting highly customized layout requirements.

  3. system and contact information customization:General information about 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 backend. In the template, you can usesystemTags andcontactTags conveniently call up this information.Further, you can also add custom parameters in the system settings and contact information settings on the backend, providing more callable global information for the template, such as special promotional slogans or partner lists, without modifying the code to update the common content of the website.

Master template tags, fine control over content

Ancy CMS provides rich template tags, which are the bridge connecting website content with the frontend layout. Mastering their use will make your template customization work twice as effective.

  1. Data call: Rich and diverse tags:

    • Content list and detail: archiveListandarchiveDetailA powerful tool for handling core content such as articles and products.archiveListYou can flexibly display the content list based on conditions such as category ID, model ID, recommendation attributes, and sorting method, and it supports pagination.archiveDetailThen used to display detailed information of a single piece of content, including its custom fields.
    • Categories and pages: categoryListUsed to display the hierarchical structure of categories,categoryDetailGet detailed information 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.contactTags are used to output contact information such as contacts, phone numbers, email addresses, etc.tdkTags help you dynamically set the Title, Keywords, and Description required for SEO on different pages.
    • Navigation and友情链接: friendship links: navListCan flexibly build multi-level website navigation menus.linkListIt is used to display friend links.

  2. Logic and loops: Build dynamic layouts:

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

  3. Modularization and Reusability: Enhance Development Efficiency:

    • Template Inheritance: extendsTags allow you to define a basic layout file (usually)base.htmlAmong them is the public 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 improves development efficiency and maintenance convenience.
    • Code snippet includes: includeTags 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 duplication, making the template structure clearer.
    • Macro function: macroTags allow you to define reusable functional code blocks that can accept parameters, generate specific HTML structures, and are particularly suitable for components that appear repeatedly but have slightly different content.

  4. Advanced Features: SEO and User Interaction:

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