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

In the daily operation and maintenance of the website, we often encounter such situations: each page needs to include a unified header, a standard footer, or a fixed sidebar.If each page were to repeat this content, it would not only be inefficient but also the workload would be enormous if changes were needed.AnQiCMS (AnQiCMS) understands this pain point and therefore provides a flexible and powerful template reference mechanism to help us efficiently manage these public contents and ensure the unity and maintainability of the website.

Overview of AnQi CMS template mechanism

In Anqi CMS, all template files are unified with.htmlas a suffix, and stored in the root directory of the website/templateIn the folder. The template engine of Anqi CMS adopts a syntax style similar to Django, which makes it possible for us to organize and manage template content very flexibly.For elements that appear repeatedly on multiple pages, Anqi CMS provides several powerful methods to reference them, ensuring that you can build and maintain the website in the most efficient way possible.

Core method one: utilizingincludeEmbed tags into common segments

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

Generally, these reusable code snippets are placed in a subdirectory namedpartial/such aspartial/header.html(Header),partial/footer.html(Footer) orpartial/sidebar.html(Sidebar).

It is very intuitive to reference, just use it where you need to refer{% include "partial/header.html" %}with this syntax.

If you want the referenced segment to receive some specific variables, you can usewithKeywords. 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.

In addition, if you are unsure whether a certain public fragment file exists, you can useif_existsKeywords. This will not cause the page to error out if the file does not exist, but will be ignored by the system instead:{% include "partial/optional_ad.html" if_exists %}This method is very suitable for introducing optional or experimental content blocks.

Core method two: utilizingextendsTag-based 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 page structures, such as headers, main navigation, footer, and copyright information, in a basic template (usually namedbase.htmlorlayout.html).

In the basic template, you will useblocktags to define areas that can be filled or overwritten by child templates, such as{% block page_title %}{% endblock %}used to define the page title area, or{% block main_content %}{% endblock %}used to define the main content area of the page.

Any template that inherits this base template, for exampleindex.htmlorarticle_detail.htmlonly needs to be declared at the beginning of the file{% extends 'base.html' %}then you can use the same name to access itblockLabel to fill in or overwrite the corresponding area content. It is not overwritten by the template.blockArea, it will automatically display the default content of the parent template.

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