In AnQiCMS template development,extendsLabels play a core role, being the key to building efficient, maintainable, and structurally unified web templates. It can beextendsThe label is understood to create a bridge between "master" and "child pages", allowing you to easily define a common layout skeleton for the entire website without repeating a large amount of the same code on each page.

Imagine, a website usually has a fixed header, footer, and sidebar that are consistent on most pages.If you do not use template inheritance, you may need to copy and paste these common codes in each HTML file, which is not only inefficient but also prone to errors once you need to make changes (such as updating the navigation menu or copyright information), and you have to change them one by one in all files.

AndextendsThe label is exactly to solve this problem.The function is to let a child template (Child Template) inherit all content and structure from a parent template (Parent Template).When a child template declares inheritance from a parent template, it automatically gains everything defined in the parent template, including HTML structure, CSS links, JavaScript references, and so on.The sub-template does not need to repeat these common parts, just focus on the unique content of itself.

The key to implementing this inheritance mechanism lies in the parent template.blockTag. In the parent template, you can use{% block 块名称 %}{% endblock %}Define some content placeholders that can be filled or overridden by child templates. For example, you can define atitleblock for page titles, acontentThe block is used for the main content of the page. The parent template provides a default content for these blocks (even if it is blank) to ensure the integrity of the page.

When a child template inherits from a parent template, it can override or extend the corresponding area in the parent template by defining the sameblocktags. For example, the child template can be written as: 

{% extends 'base.html' %} {# 继承名为'base.html'的父模板 #}

{% block title %}
    <title>我的具体页面标题</title> {# 覆盖父模板中的title块 #}
{% endblock %}

{% block content %}
    {# 这里是这个页面特有的主体内容 #}
    <p>欢迎来到我的网站！</p>
{% endblock %}

This, the sub-templateindex.htmlwas usedbase.htmlThe page skeleton defined, and only these two areas were modifiedtitleandcontentThese two areas, the rest were not explicitly covered by the sub-templateblockThe region (such as the header, footer) will follow the default content of the parent template.

extendsThe advantages of tags are self-evident:

  1. Improve development efficiency:Developers only need to focus on the unique content of the page, reducing a lot of repetitive HTML code writing work, thereby accelerating the development process of the website.
  2. Simplify maintenance work:When the public part of the website (such as the navigation bar structure, footer copyright information) needs to be updated, it is only necessary to modify the parent template once, and all child templates inheriting it will be automatically updated, greatly reducing maintenance costs and error rates.
  3. Ensure website consistency:Enforce a unified layout and structure across all pages, which helps maintain the overall style and brand image of the website, enhancing user experience.
  4. Optimize code structure:Separate common code from page-specific content, making template files clearer, modular, easier to understand and manage.

While usingextendsWhen labeling, there are several important **practices. First,extendsThe tag must be the first tag in the sub-template, any HTML code or template tag before it will cause inheritance to fail. Secondly, try to abstract elements that appear repeatedly on multiple pages into the parent template and useblockLabel the area reserved for all possible content changes in the sub-template. This ensures that the parent template is sufficiently general, and the sub-template is sufficiently concise.

In summary,extendsTags are the foundation of the AnQiCMS template system, which realizes the concept of 'write once, reuse anywhere'.It elegantly separates layout from content, greatly enhancing the development efficiency, maintainability, and consistency of templates, and is an indispensable tool for building professional-level websites.

Frequently Asked Questions (FAQ)

  1. WhyextendsMust the label be the first label in the template? extendsThe tag's role is to define the inheritance relationship of the current template, it indicates that the template engine should first load and parse the parent template, and then apply the content of the child template on this basis. IfextendsThe tag is not the first, the template engine may have started processing or outputting other content before it is parsed, which may lead to the incorrect establishment of inheritance logic, causing parsing errors or page structures that do not meet expectations.

  2. I can add what the parent template does not define in the sub-templateblockCan I add the HTML content of the tag?It is not recommended to do this. In the child template inheriting from the parent template, all HTML content belonging to the child template itself should be placed inside someblocktag. If the content is placed inside anyblockOutside the tag, this content is usually ignored or incorrectly rendered because the template engine considers it to be 'orphaned' content that does not belong to any covered area.

  3. If I define the default content in the parent template'sblockbut the child template has not rewritten thisblockhow will the page display?If the child template inherits the parent template but does not explicitly rewrite a certainblockLabel, then thatblockThe area will continue to use the default content defined in the parent template.This is the embodiment of template inheritance flexibility, which allows you to provide fallback content for all possible areas in the parent template, ensuring that even if the child template does not make any customization, the page can still display a basic version.