How `include`, `extends`, and `macro` tags enhance the reusability and maintainability of template code?

Enhance the efficiency and maintainability of the AnQi CMS template:include/extendsandmacroingenious application

In the daily content operation of AnQi CMS, we often need to create and manage a large number of pages.How to ensure that these pages maintain consistency while also being developed and maintained efficiently is a challenge that every operator needs to face.include/extendsandmacroThese three core tags provide us with powerful tools to greatly enhance the reusability and maintainability of template code.

include: The art of code snippet splicing.

Imagine that each page of your website has the same header (Header), footer (Footer), or sidebar.If you were to repeat the same code segments in each page file, then changing a Logo, a section of copyright information, or a navigation link would mean having to modify dozens, if not hundreds, of files, which is undoubtedly catastrophic.

includeThe label is to solve this kind of repetitive labor.It allows us to save independent, reusable HTML code snippets in separate files and then insert them like a puzzle where needed.partial/header.htmlThe file is specifically used to store the website's header code. Then, simply use it in all places where the header needs to be displayed.{% include "partial/header.html" %}.

The advantage of this method is obvious:

1. Highly modular：Divide the page into logically clear small modules, each responsible for its own content, improving the readability and management efficiency of the code.
2. Easy maintenance：Page header or footer changes, just need to modifypartial/header.htmlThis file will be updated on all pages that reference it, greatly reducing maintenance costs and error rates
3. Flexible parameter passing:includeThe tag also supports passing throughwithA keyword is used to pass variables to the template, allowing the imported fragment to display different content based on different contexts, thereby increasing reusability. For example, you can pass atitleVariable to give the page header, so that it displays the title of different pages.

ByincludeWe can abstract those static, almost unchanged public areas to make the template code more concise and organized.

extends: The way of page skeleton reuse.

If we sayincludeIs for the reuse of the "block" in the page, thenextendsThis is the reuse for the "page layout skeleton".In a website, many pages may have a similar overall layout, such as top navigation, sidebar, main content area, and footer copyright information.But the main content area may differ.

extendsTags allow us to define a "basic template" (usually namedbase.htmlorlayout.htmlThis basic template includes the overall structure and common elements of the website (such asincludethe header, footer). In the basic template, we can use{% block content %}Such tags define some areas that can be overwritten by child templates.

Then, other page templates (child templates) can{% extends 'base.html' %}Inherit this basic template and use the same named{% block content %}Fill in your own content.

extendsThe benefits brought are revolutionary:

1. Unified website structure: Ensure that all pages follow a unified layout and style, enhancing user experience and brand image.
2. Rapid iteration designWhen adjusting the overall layout of the website, only the basic template needs to be modified, and all pages inheriting it will be automatically updated, greatly accelerating the design iteration cycle.
3. Focus on content development: Subtemplate developers do not need to concern about the overall structure of the page, just focus on filling inblockspecific content, which improves development efficiency and professionalism.

It should be noted that,{% extends %}The tag must be the first tag in the sub-template, which is like telling the template engine: 'I will build my page based on this skeleton.'

macro: A reusable component packaging tool

When there are some components with similar structures but dynamic content on the page, such as each product card in the product list, each comment in the comment list, or a unified style prompt with icons and text, simply usingincludeIt may not be very flexible, as it is mainly used to introduce static content or simple variables. At this time,macrothe tag comes into play.

macroIt can be regarded as a "function" or "component" in the template, which allows us to define a template code block with parameters. It's like writing a function in a programming language, where we can define amacroRender a product card and pass in parameters such as the product image, name, price, and so on.

For example, define a product card.macro:

{% macro product_card(product_image, product_name, product_price, product_link) %}
<div class="product-item">
    <a href="{{ product_link }}">
        <img src="{{ product_image }}" alt="{{ product_name }}">
        <h3>{{ product_name }}</h3>
        <p class="price">{{ product_price }}</p>
    </a>
</div>
{% endmacro %}

Then on the product list page, by looping through the data and calling thismacroto render each product:

{% import "macros/product_macros.html" as product_macro %} {# 假设宏定义在单独文件 #}
{% for product in products_list %}
    {{ product_macro.product_card(product.image, product.name, product.price, product.link) }}
{% endfor %}

macroThe value lies in:

1. Ultimate reusabilityEncapsulate complex component logic, control its display through parameters, and avoid a lot of repeated HTML and logic code.
2. Code is clearer: The template code becomes more concise and declarative, making it easy to see the structure of the page and the relationship between components at a glance.
3. Easy to expand and modify：Adjust the style or structure of the component, just modifymacroDefine, all the places calling it will automatically take effect.
4. Improve performance：Optimize throughmacroInternal logic, can improve rendering efficiency.

macrousually associates withimportThe labels are combined to organize macro definitions into separate files, keeping the main template clean.

Summary

Of Security CMSinclude/extendsandmacroLabels provide a layered, modular solution for template development.extendsResponsible for constructing the overall layout skeleton of the website, ensuring the uniformity of the page structure;includeUsed to embed static, reusable code snippets, enhancing the modularization degree; andmacroThe component encapsulates dynamic parameter components, achieving a higher level of code reuse and flexibility.

By reasonably using these three tags, not only can you significantly reduce the writing of repetitive code and improve development efficiency, but also make your website template structure clear and easy to manage, thus making it easy to maintain and iterate in the future, allowing AnQi CMS to truly become your powerful assistant for efficient operation.

Frequently Asked Questions (FAQ)

Q1:includeandmacroHow should I choose, as it seems that all of the code can be reused?

A1: They have their respective focuses. When you need to introduce a relatively static HTML fragment with little content change, or one that can be satisfied by a few global variables, useincludeSimpler and more direct, for example, the header, footer, and copyright information of a website. When you need to create highly configurable components whose content changes dynamically according to the input parameters,macroIs a better choice, for example, a product card, article list item, button group, etc., it can receive parameters like a function and render different content.

Q2: UseextendsCan a child template inherit variables defined in the parent template?

A2: Can be.The child template automatically inherits all available variables and context environments from the parent template when inheriting the parent template.setThe tag has redefined the same variable.

Q3: If I am{% extends %}What will happen after the label added other content (such as HTML code)?

A3: The template engine of Anqi CMS will report an error.{% extends %}The label must be the first label in the template file (excluding comments) because it defines the basic layout inherited by the current template.If you add other non-blank content after it, the template engine cannot correctly parse the inheritance relationship of the template, resulting in rendering failure.{% block %}Inside the tag.