安企CMS (AnQiCMS) as an efficient and flexible content management system, its powerful template function and content model provide us with great freedom, allowing us to finely control the layout of content on the front-end page according to the actual needs of the website.To achieve this goal, we need to deeply understand the template engine, content model, and built-in tag usage of the security CMS.

Core elements of layout customization in Anqi CMS

Customize content layout in AnQi CMS, mainly focusing on the following core elements:

  1. Powerful template engine:The AnQi CMS uses a template engine syntax similar to Django, which makes template creation intuitive and easy to learn. It uses double curly braces{{变量}}Invoke variable, use single curly braces and percentage signs{% 标签 %}Control logic (such as conditional judgment, loop), we can flexibly present backend data on the frontend.
  2. Flexible content model and custom fields:
  3. Diverse template files and naming conventions:All template files are stored in:/templatedirectory, and named with.htmlFor suffix. Anqi CMS has preset a series of template file naming conventions, such asarticle/detail.htmlFor article detail pages,product/list.htmlFor product list pages,page/detail.htmlUsed for single page detail. In addition, it also supports creating custom template files for specific document ID, category ID, or single page ID, for examplearticle/detail-10.htmlThis is specifically used for the article detail page with ID 10. These naming conventions and custom features provide us with great flexibility.
  4. Rich built-in tags and filters:The auto CMS is built-in with dozens of template tags and filters, used for dynamically retrieving and processing various data. For example,archiveListTags are used to retrieve articles or product lists,archiveDetailLabel used to get the details of a single content item,categoryListandcategoryDetailUsed to get category information,pageDetailUsed to get information about a single page, and also,systemLabel to get system configuration,navListGet navigation data, etc. Coordinate withforLoop tags andifConditional tags, as well assafe/truncatecharsAnd filters, we can accurately control the output format and style of content.

Practical Guide: Customizing Your Website Layout in Layers

Understood the core elements, we can follow the "from macro to micro" approach, and layer-by-layer customize the website layout:

First layer: Global skeleton - building and inheriting the general template

The website usually has some common structures, such as headers (Header), footers (Footer), and sidebars (Sidebar). In Aiqi CMS, we can use template inheritance (}]})extends) And including (include) To build these global skeletons.

  • Create a basic template (base.html):In/template/你的模板目录/Create one belowbase.htmlFile, as the master template for all pages of the website. In this file, define the HTML structure, include public CSS/JS, and use{% block 区域名称 %}{% endblock %}tags to define replaceable content areas, such asblock title(Page Title)、block header(Page Header)、block content(Main Content) andblock footer(Footer)。
  • Contains public segments：For independent modules such as page header navigation, sidebar, and others that appear repeatedly on multiple pages, you can split them into independent template fragments (for examplepartial/header.html/partial/footer.html), and thenbase.htmlreference it in{% include "partial/header.html" %}The way to introduce. This helps with code reuse and maintenance.

Second level: Model and classification level - Layout definition of batch content.

For content of specific types (such as all articles) or content under specific categories, we need to define unified layout rules.

  • Content model-level template:The Auto CMS will first look for template files under specific content models. For example, all article list pages will default to usingarticle/list.html, and all product detail pages will default to usingproduct/detail.html. You can create or modify these template files according to these conventions to achieve unified layout at the model level.
  • Categorization-level custom template:If the content under a certain category (such as "Company News" category) needs to be different from other categories (such as "Industry Dynamics
    • Category Template:When you specify a "category template" (such asnews_list.html), the list page of this category and its subcategories will use this custom template instead of the default one.article/list.html.
    • Document template:When you specify a "document template" (for examplenews_detail.html), then this custom template will be used for all document detail pages under this category and its subcategories, instead of the default one.article/detail.html。 Through this method, you can easily achieve differentiated display for groups of content with different categories.

In these templates, you will use a lot ofarchiveList/archiveDetail/categoryDetailUse tags to dynamically obtain content data. For example, in an article list page (article/list.html) you can use{% archiveList archives with type="page" limit="10" %}to obtain the article list, and useforto loop through and display.

Third layer: Content item level - Refinement of personalized display

For individual content items with special display requirements, the Anqi CMS also provides flexible customization options.