As an experienced website operations expert, I am well aware 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.AnQiCMS (AnQiCMS) provides a solid foundation with its high-performance architecture based on the Go language and flexible modular design.Among many tools to improve development efficiency, the templates provided in AnQi CMSincludeTags 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: headers, footers, navigation menus, article list cards, product display blocks, sidebars, and so on.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 model is not only inefficient, but also lays heavy pitfalls for future maintenance.Once a public component needs to be modified, you will have to check and update all the pages that refer to it one by one, which is undoubtedly a nightmare that takes time and effort.

Anqi CMS just realized this pain point and provided in template design.includeLabel. The core idea of this label is to extract reusable parts from the template and store them as independent code snippets.When we need to use these fragments on any page, we can simply pass throughincludeLabel the reference as we use building blocks to build models, quickly assemble pre-made modules, and create rich and diverse pages.

Eliminate redundancy, unify management: the cornerstone of componentization

includeThe most direct benefit of tags is that it completely eliminates code redundancy.For example, the header and footer of a website, which almost appear on every page.In AnQi CMS, you can abstract them separatelypartial/header.htmlandpartial/footer.htmlSuch an independent file, and place it in the template directorypartial/In 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.What is more, it greatly enhances maintainability. Imagine if your website needs to change the logo, modify the filing information, or update the website statistics code, you only need to modifyheader.htmlorfooter.htmlThis file, all 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 philosophy 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 dead or unchangeable. Anqi CMS'sincludeLabels allow you to pass dynamic data when introducing components, which gives the components great flexibility. ThroughwithKeywords, you can specify additional variables for the included templates.

For example, you may have a generic 'message prompt' componentpartial/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="请检查您的网络连接。" %}

and in thepartial/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 input oftitleandmessageDisplay different information, greatly improves the reusability of the component, and avoids the麻烦 of creating a separate component for each message type. If you only want the template imported to use specified 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, reducing unexpected side effects.

Robustness guarantee: handling missing components

In complex project development, file path changes or unexpected component missing situations often occur. The Anqi CMS providesincludetags that take this into account, providingif_existsKeyword. When you introduce a file that may not exist, you can use this keyword:

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

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

includecooperating with other auxiliary tags

It is worth mentioning that the AnQi CMS template engine also providesextendsandmacroand other auxiliary tags, which cooperate withincludeEach in their own role, they together constitute a powerful template development system:

  • extendsTagIt is mainly used to implement template inheritance, defining the overall "skeleton" or layout of the page (such asbase.htmlIt defines the common structure of the page and throughblocktags reserve areas for filling.includetags are at some point of thisblockInside the area, insert smaller, more specific components. It can be understood asextendsDefined the main structure of the building, whileincludeThen it is the furniture and decoration that fills the room.
  • macroTag：It is more like a template function used to encapsulate reusable logic fragments, which 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, macroWill be very useful. AndincludeMore inclined to directly insert predefined HTML content fragments.

Therefore, in AnQi CMS, efficient component-based development is often the result of the collaborative effect of these three:extendsBuilding the page framework,includeFilling public or reusable content blocks,macroProcess more refined dynamic content generation logic.

Conclusion

In the ecosystem of Anqi CMS,includeLabels are not just a simple file reference mechanism; they are the key tools for improving development efficiency, ensuring project maintainability, and promoting team collaboration.By appropriately using it, we can break down complex pages into manageable and reusable components, significantly reduce repetitive work, improve code quality, and respond more flexibly and efficiently to the ever-changing demands of website content.This is a powerful embodiment of AnQi CMS's dedication to providing 'lightweight and efficient content management services' for small and medium-sized enterprises and content operation teams.Componentization makes your website development and operation smoother.

Frequently Asked Questions (FAQ)

1.includeTags andextendsWhat are the main differences in usage scenarios for tags?

In simple terms,extendsTags are mainly used to define the overall layout or "skeleton" of a page, such as the common header, sidebar, and footer structure of a website, which is achieved throughblockdefining replaceable areas. Whileincludetags are for theseblockInside the area, insert smaller, more specific "content segments", such as a navigation menu, an advertisement slot, or an article list card. You canextendsUnderstanding means defining the structure of the house type, andincludewhich is placing furniture and appliances in this house type.

2. UseincludeHow to have independent CSS and JavaScript for a component introduced by a tag?

isincludeThe 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 it is more recommended 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, use moderatelyincludeThe tag has a negligible impact on the loading performance of the website, and it may even indirectly bring benefits by improving the organization of the code. Anqi CMS will parse all the tags at once when rendering templates.includeThe file. This means it does not incur the additional network overhead that multiple HTTP requests would.The real impact on performance is often complex data queries within components, large image resources, or unoptimized JavaScript code, rather thanincludeIt is the key to improving performance to reasonably divide components and ensure the optimization of the internal content of the components.