How to reference common header, footer, or sidebar content in a template?

【en】AnQi CMS template mechanism overview

In AnQi CMS, all template files are uniformly named with.htmlsuffix, and stored in the root directory of the website under/templateIn the folder.The template engine of AnQi CMS adopts a syntax style similar to Django, which allows us to organize and manage template content very flexibly.For common elements that appear repeatedly across multiple pages, Anqi CMS provides several powerful ways to reference them, ensuring that you can build and maintain your website in the most efficient manner.

Core method one: usingincludeLabel embedding public segment

When you need to embed some relatively independent code segments that can be reused across different pages or modules,includeTags are your favorite tool.Imagine a public sidebar ad, a communication subscription form, or a brief contact information block, which may appear in multiple locations on the website but have relatively independent functions and content.

Generally, these reusable code snippets are placed in a subdirectory namedpartial/, for examplepartial/header.html(header),partial/footer.html(footer) orpartial/sidebar.html(sidebar).

It is very intuitive to refer to, you just need to use it where you need to introduce.{% include "partial/header.html" %}This syntax will do.

If you want the introduced segment to receive some specific variables, you can usewithKeyword. For example, if you want to dynamically display a title in the page header, you can call it like this:{% include "partial/header.html" with page_title="我的网站首页" %}.header.htmlIn the template, you can use it directly.{{ page_title }}Retrieve this value and use it along with other inherited variables.

Moreover, if you are not sure if a certain public segment file exists, you can useif_existsKeywords. In this way, even if the file does not exist, it will not cause the page to report an error, but will be ignored by the system:{% include "partial/optional_ad.html" if_exists %}. This method is very suitable for introducing some optional or experimental content blocks.

Core Method Two: UtilizeextendsTag Implementation of Template Inheritance

Definition of the overall website layout,extendsTags provide a more powerful template inheritance mechanism. This is like designing a "master page" or "skeleton" for a website, where you can define all shared structures of the pages, such as page headers, main navigation, footer, and copyright information, in a basic template (usually namedbase.htmlorlayout.html）in it.

In the basic template, you will useblocktags to define areas that can be filled in or overridden by sub-templates, for example{% block page_title %}{% endblock %}to define the page title area, or{% block main_content %}{% endblock %}Used to define the main content area of the page.

Any child template that inherits this base template, such asindex.htmlorarticle_detail.html, needs to be declared at the beginning of the file.{% extends 'base.html' %}, then it can be accessed through the same name.blockTag to fill or rewrite the content of the corresponding area. Not rewritten by the template.blockArea, will automatically display the default content from the parent template.

This inheritance method greatly simplifies the page structure management. When you need to adjust the header or footer, simply modify