In the AnQi CMS template, how can the `include` tag be used to achieve more efficient modular development and maintenance?

As an experienced website operations expert, I know that in the current fast iteration and high-efficiency requirements, the efficiency and maintainability of template development are crucial to the success of the project.English CMS (EnglishCMS) provides us with a solid foundation with its high-performance architecture based on the Go language and flexible modular design.includeLabels are undoubtedly the key to achieving more efficient modular development and maintenance.

Imagine that your website is like a complex building, composed of countless repetitive or similar components: header, footer, navigation menu, article list cards, product showcase blocks, sidebar, etc.If there is no componentization, every time we build a new page, we may need to draw these components from scratch, or simply copy and paste the code in a brute force manner.This development mode is not only inefficient, but will also lay heavy hidden dangers for future maintenance.Once a public component needs to be modified, you will have to check and update all the pages that reference it one by one, which is undoubtedly a time-consuming and labor-intensive nightmare.

The Anqi CMS is aware of this pain point and providesincludeLabel.The core idea of this tag is to extract reusable parts from the template and store them as independent "code snippets".includeTags can be referenced as we use building blocks to construct models, quickly combining pre-made modules to build a variety of rich and diverse pages.

Eliminate redundancy, unify management: the cornerstone of componentization

includeThe most direct benefit of the tag is the complete elimination of code redundancy.For example, the website's header and footer appear on almost every page.partial/header.htmlandpartial/footer.htmlSuch an independent file, and place it in the template directory underpartial/the code snippet directory.

When a new page needs to include a header and footer, you just need to write in the main template file:

{% include "partial/header.html" %}
<!-- 页面主体内容 -->
{% include "partial/footer.html" %}

This approach makes the core layout code concise and clear, easy to understand.It is also extremely maintainable.header.htmlorfooter.htmlThis file, all the pages that reference it will be automatically synchronized for updates, saving a lot of repetitive labor, and greatly reducing operation and maintenance costs.This is in line with the concept of AnQiCMS 'Modular Design: Each functional point can be independently upgraded and expanded'.

Flexible and versatile: dynamic data injection component

Component-based development does not mean that components are static and unchangeable. Anqi CMS'sincludeLabels allow you to pass dynamic data to components when they are introduced, which gives the components great flexibility. ThroughwithKeywords, you can specify additional variables for the included templates.

For example, you may have a general “message prompt” component.partial/alert.htmlIt needs to display different titles and content. You can call it like this:

{% include "partial/alert.html" with title="操作成功" message="您的设置已保存！" %}
{% include "partial/alert.html" with title="注意" message="请检查您的网络连接。" %}

Andpartial/alert.htmlInternally, you can use these variables like this:

<div class="alert">
    <h3>{{ title }}</h3>
    <p>{{ message }}</p>
</div>

In this way, the samealert.htmlThe component can be based on the incomingtitleandmessageDisplay different information, greatly improving the reusability of components and avoiding the麻烦 of creating a separate component for each message type. If you only want the imported template to use a specified few variables instead of all variables of the current template, you can also addonlyKeywords, such as:{% include "partial/header.html" with title="页面标题" only %}This helps to limit the scope and reduce unexpected side effects.

Robustness guarantee: handling missing components

In complex project development, file path changes or unexpected component missing occur from time to time. The Anqi CMS considers thisincludeand providesif_existsKeyword. When you introduce a file that may not exist, you can use this keyword:

{% include "partial/optional_sidebar.html" if_exists %}

Ifoptional_sidebar.htmlThe file exists, it will be introduced normally; if it does not exist,includeThe label will be gracefully ignored without throwing an error and interrupting the page rendering.This provides additional robustness guarantees during the development phase, when testing different component configurations, or when deploying in different environments.

includeCollaboration with other auxiliary tags

It is worth mentioning that the Anqi CMS template engine also providesextendsandmacroand other auxiliary tags, they collaborate withincludeEach performs its own duties, collectively forming a powerful template development system:

• extendstagsIt is mainly used to implement template inheritance, defining the overall "skeleton" or layout of the page (such asbase.html）。It defines the general structure of the page and reserves areas that can be filled in.blocktags reserve areas that can be filled in.includetags are located at some point in this “skeleton”.blockWithin the area, insert smaller, more specific components. It can be understood asextendsDefined the main structure of the building,includewhich is the furniture and decoration inside the room.
• macrotags：It is more like a template function used to encapsulate reusable logic fragments. It can only call variables passed in as parameters and has a limited scope. When you need to repeatedly render a specific HTML structure with complex internal logic or dynamically generated content, macroIt will be very useful.includeIt is more inclined to directly insert predefined HTML content fragments.

Therefore, in the AnQi CMS, efficient component-based development is often the result of the synergy of these three:extendsBuild the page framework,includeFill in common or reusable content blocks,macroProcess more refined dynamic content generation logic.

Concluding remarks

In the ecosystem of Anqi CMS,includeLabels are not just a simple file reference mechanism; they are also a key tool for improving development efficiency, ensuring project maintainability, and promoting team collaboration.By appropriately utilizing it, we can decompose complex pages into manageable and reusable components, greatly reduce repetitive work, improve code quality, and respond more flexibly and efficiently to the ever-changing needs of website content.This is a powerful manifestation of what Anqi CMS is committed to providing for small and medium-sized enterprises and content operation teams: 'a lightweight and efficient content management service'.Components make your website development and operation smoother.

---

Common Questions (FAQ)

1.includeTags andextendsWhat are the main differences in the use scenarios of tags?

In simple terms,extendsThe tag is mainly used to define the overall layout or 'skeleton' of the page, such as the common header, sidebar, and footer structure of a website, it is defined throughblockdefining replaceable areas.includethe tag is among theseblockArea internal, insert smaller and more specific "content segments", such as a navigation menu, an advertisement slot, or an article list card. You canextendsUnderstanding means defining the house type structure, andincludewhich is placing furniture and appliances in this house type.

2. UseincludeHow to have independent CSS and JavaScript for components introduced by tags?

byincludeThe component introduced by the tag is actually a part of its parent template, therefore they share the CSS and JavaScript environment of the parent template. To add independent styles and scripts to the component, you can choose to write them directly in the component file.<style>and<script>Label, or more recommended is to define specific CSS classes or IDs for components, and write rules for these classes or IDs in the main stylesheet or main JavaScript file to ensure the isolation and controllability of styles and behaviors.

3.includeWill multiple widgets affect the website's loading performance?

Generally speaking, using them moderatelyincludeThe impact of tags on website loading performance is negligible, and it may even indirectly bring benefits through improving code organization. The Anqi CMS will parse all the tags at once when rendering templates.includeThe file.This means it does not bring additional network overhead like multiple HTTP requests.includeThe key to improving performance is to reasonably divide components and ensure the optimization of the content within the components.