Unlock AnQiCMS layout cube:extendsHow to achieve differentiated design of content pages with tags

As an experienced website operations expert, I know that the way website content is presented is crucial for user experience and brand image.How to maintain a consistent overall style on a website with various types of content (such as in-depth articles, product introductions, event details) while also allowing each type to have a unique display page, this is undoubtedly a challenge many operators face.extendsThe clever use of tags is the key to solving this problem.

extendsThe core concept: building the skeleton and flesh of the page

Imagine, we are designing a magnificent building.Before we start construction, we first need an overall blueprint that defines the overall structure of the building -- where the main entrance hall is, where the load-bearing walls are, and where the roof is.base.html.

In the template system of AnQiCMS,extendsTags are used to declare that a template is an extension of another template. It's like telling the system: 'Hey, this page is based onbase.htmlThis grand blueprint is built.base.htmlcommon elements defined, such as header, footer, sidebar, or navigation menu, do not need to be written repeatedly on each page, but are automatically owned by all pages inheriting it.

How is differentiation achieved? The answer is hidden inbase.htmlof{% block ... %}the tags. TheseblockTags are like "customizable areasbase.htmlwe might define a{% block content %}{% endblock %}to be the main content area of the page, or{% block title %}{% endblock %}to define the page title.

When a page (such asarticle/detail.htmlorproduct/detail.html) to the same port of the AnQiCMS application instance (the default is usually{% extends 'base.html' %}inherits the base template, it can optionally “fill in” or “override” theseblockArea. If it does not cover someblock, then the area will be displayedbase.htmlThe default content预设的默认内容；if it overrides, then it will display its customized content, thus realizing the differentiation of layout.

Realize differentiation: Customized for different content types

The 'Flexible Content Model' feature of AnQiCMS provides a solid foundation for differentiated page layouts.The system is pre-installed with article and product models, but operators can customize more content models according to their own business needs.This not only means that different structured data can be managed, but also that dedicated display pages can be designed for these different types of content.

For example, for aarticle detail page, we usually need to highlight the author's information, publication time, related article list, and comments section. Therefore,article/detail.htmlthis template may inheritbase.htmlafter,{% block content %}Contains the following elements:

  • Article title ({% archiveDetail with name="Title" %})
  • Publish date, category and tags ({% archiveDetail with name="CreatedTime" %}/{% categoryDetail with name="Title" %}/{% tagList %})
  • Main content ({% archiveDetail with name="Content" %}|safe)
  • Previous/next article link ({% prevArchive %}/{% nextArchive %})
  • Recommended Articles ({% archiveList with type="related" %})
  • Comment Form and List ({% commentList %})

And in aProduct Details Page[for example]product/detail.html), the core of the page is the display and conversion of the product. It inheritsbase.htmlAfter, its{% block content %}The structure will be quite different:

  • Product name ({% archiveDetail with name="Title" %})
  • Product gallery or carousel ({% archiveDetail with name="Images" %})
  • Price, inventory, SKU information ({% archiveDetail with name="Price" %}/{% archiveDetail with name="Stock" %})
  • Product Parameters Table or List ({% archiveParams %})
  • Product Description or Selling Points ({% archiveDetail with name="Description" %})
  • “Add to Cart” or “Buy Now” button
  • Detailed product specifications, usage instructions, etc. ({% archiveDetail with name="Content" %}|safe)

PassextendsThe application of tags allows us to easily have distinctly different content area layouts for articles and product pages, while common elements such as headers, footers, and navigation remain consistent, greatly enhancing design and development efficiency.

Refine down to individual content or category: deeper level of customization

The strength of AnQiCMS is not just about defining a general layout for 'models'.Sometimes, we may need to design a unique page for a specific article, product, or even a category.For example, a single page of the company's annual report, a dedicated detail page for a hot new product, or a special event category.

According to the guidance of the document, AnQiCMS supports setting through the backend,a single document/Specific categoryorIndividual single pageSpecify a custom template. This means, evenarticle/detail.htmlit is a general template for articles, we can still specify a template123for the article "AnQiCMS v3.0 Release" with IDarticle/detail-v3-release.htmlan independent template. Similarly,page/about.htmlit can provide special display for a single page 'About Us'.

These custom templates can still be utilized.extendswith its powerful capabilities. For example,article/detail-v3-release.htmlcan be inheritedarticle/detail.htmlThen only modify one specific oneblockFor example, add a sidebar with "New Feature Highlight"blockor adjust the layout of the main content area to highlight the video introduction.This layered inheritance mechanism ensures that the basic structure and common functions of the page can be effectively reused and managed regardless of the degree of customization.

Layout considerations under the operation strategy

From an operational perspective,extendsThe layout differentiation brought by tags has profound significance:

  1. User experience optimization:Different types of content adapt to different information structures and interaction methods, making it easier for users to obtain the information they need.The article focuses on reading, the product focuses on understanding and purchasing, and the page layout should serve these core goals.
  2. SEO friendliness: base.htmlCan unify the generation logic of TDK (title, keywords, description), ensuring that all pages have a basic SEO structure.blockThe customization allows various content types to differ in detail for SEO optimization, for example, product detail pages can focus more on product models and purchase intent keywords.
  3. Brand consistency and flexibility coexist:The visual recognition and core navigation of the brand are unified through the benchmark template, but they can also be flexibly adjusted according to the operational strategy, avoiding the fatigue of being 'the same as everyone else'.
  4. Development and maintenance efficiency:Developers only need to focus on filling or overriding specific:blockInstead of building each page from scratch, it greatly shortens the development cycle and reduces maintenance costs. When global modifications are needed (such as changing the logo, adjusting footer information), only the relevant section needs to be modified.base.htmlIt is enough, no need to touch all sub-templates.

Summary

In AnQiCMS,extendsTags are not just a simple template instruction; they are more like the core pivot of a 'layout Rubik's Cube'.By establishing a clear template inheritance relationship, we are able to build highly differentiated, function-focused display pages for different content types such as articles, products, and single pages while maintaining the overall consistency of the website.extendsAll are powered by their flexible and powerful mechanisms, enabling AnQiCMS users to achieve a dual leap in efficiency and innovation in content operation.Grasp its essence, and you will be able to better control AnQiCMS, creating a beautiful and efficient website content presentation scheme.

Common Questions and Answers (FAQ)

1. Can I create completely independent base templates for different modules (such as articles and products) rather than inheriting the same one?base.html?

Of course you can. Although it is usually recommended to use a primarybase.htmlTo maintain global consistency of the website, but in some special cases, if you wish the article module and the product module to have completely different overall frameworks (such as, completely different navigation structures or header-footer styles), you can create multiple independent base templates, likearticle_base.htmlandproduct_base.htmlThen, let each detail page (such asarticle/detail.html) inherit