How to reuse common code snippets through the `include` tag in AnQiCMS templates to optimize the display structure?

When building and managing websites, improving efficiency and maintaining code cleanliness is a goal pursued by every operator. AnQiCMS, as an efficient content management system, provides powerful template functions, among whichincludeTags are the tools to achieve this goal. They allow us to abstract out repeated code snippets on the website, form independent modules, and then reference them where needed, greatly optimizing the template structure and subsequent maintenance work.

UnderstandingincludeTag: The foundation of modular websites

Imagine that your website has many pages, but each page shares the same header, footer, and sidebar.If there is no modular mechanism, you may need to rewrite this content on each page template.Once you need to modify a small detail of the page header, such as adding a navigation link, you will have to make changes on all related pages, which is not only time-consuming but also prone to errors.

includeTags are born to solve this pain point. In the Anqi CMS template system,includeThe label is like taking a large Lego set apart into individual pieces.These small parts (such as headers, footers, sidebars, and specific feature blocks, etc.) can be made separately and then assembled anywhere as needed.The AnQi CMS supports syntax similar to the Django template engine, making modularization simple and intuitive.

Why chooseincludeTags? Three core advantages

UseincludeTags are not just a convenience at the code level; they have profound benefits for the overall operation and management of the website:

1. Significantly improve code reusability:This isincludeThe most direct benefit. By encapsulating common modules (such as website header navigation, footer copyright information, and unified display styles for article list items) into independent template files, you do not need to write the same code repeatedly on multiple pages.This means that the development workload is greatly reduced, avoiding unnecessary repetitive labor.

2. Optimize template structure, improve readability:When a page's template file becomes long and complex, it becomes very difficult to find and understand the code of a specific functional area. ThroughincludeYou can decompose a complex page into small files with clear logic and single responsibilities. For example,index.htmlit may only contain references toheader.html/sidebar.html/main-content.htmlandfooter.html, making the overall structure clear at a glance.

3. Simplify website maintenance, reduce error rates:Website content and features often need to be updated. If the code of a common module is scattered across multiple template files, any modification requires individual operations, increasing the maintenance cost and the risk of introducing errors. And usingincludeAfter, you only need to modify a contained file, and all pages referencing it will be automatically updated, greatly simplifying the maintenance process and ensuring consistency of modifications.

How to use it in Anqi CMS templateincludeTag?

The Anqi CMS template files usually use.htmlas the suffix, and store them uniformly in/templatethe directory. For theincludecommon code snippets, it is recommended to place them in/templateUnder the directorypartial/In a subdirectory, for examplepartial/header.html/partial/footer.htmletc., which is a good organizational habit.

Basic Introduction Method

The simplestincludeThe usage is to directly specify the path of the template file to be imported:

{% include "partial/header.html" %}
{% include "partial/footer.html" %}

Thus,header.htmlandfooter.htmlThe content will **be included into the corresponding position of the current template file.

Passing variables: making the included module more flexible

Sometimes, the public modules you introduce need to display different content based on the context of the current page.For example, a generic sidebar may need to know the current article's ID to display related articles.Now, you can usewithParameters are passed to the template variables introduced:

{# 在当前模板中 #}
{% include "partial/sidebar.html" with current_article_id=article.Id %}

Inpartial/sidebar.htmlIn the file, you can use it directly:current_article_idThis variable has been introduced:

{# partial/sidebar.html 文件中 #}
<div>
    {% if current_article_id %}
        <!-- 显示与文章 {{ current_article_id }} 相关的侧边内容 -->
    {% else %}
        <!-- 显示通用侧边内容 -->
    {% endif %}
</div>

If you need to pass multiple variables, just separate them with spaces:

{% include "partial/meta.html" with page_title="关于我们" page_keywords="公司,简介" %}

Limit the scope of variables: maintain clear boundaries

By default,includeThe template introduced can access all variables of the current template. But to avoid name conflicts or unnecessary coupling, you can useonlyThe parameter restricts the visibility of the variable to pass through onlywithExplicitly passing the variable:

{% include "partial/meta.html" with page_title="关于我们" only %}

In this case,partial/meta.htmlAccess will be restricted topage_titleThis variable, and cannot access any other variables in the current template.

Gracefully handle non-existent files:if_exists

If you are not sure whether a certainincludetemplate file exists, but you don't want the page to crash due to the file not existing, you can useif_existsparameter. This way, if the file does not exist, theincludeThe statement will be silently ignored without interrupting the page rendering:

{# 如果 partial/ads.html 存在则引入，否则忽略 #}
{% include "partial/ads.html" if_exists %}

Conclusion

includeTags are a basic and powerful tool in the development of Anqi CMS templates.By it, we can easily achieve the modularization and structuring of templates, effectively improve development efficiency, reduce maintenance costs, and ultimately provide website users with more stable and faster access experience.master and use wellincludeThe tag will make your website operation work twice as effectively.

Frequently Asked Questions (FAQ)

1. includeTags andextendsWhat are the differences between tags? extendsTags are mainly used for template inheritance, it defines a basic layout (skeleton), and other templates can be based on this skeleton to fill or override specific content blocks (block）。WhileincludeTags are used to insert a small code snippet (such as a header or footer) into the specified location of any template file. In simple terms,extendsis 'I build based on you,'includeIs "I insert you here".

2. Can I useincludeCan tags introduce modules that dynamically generate content?Of course you can.includeThe tag itself does not limit the dynamism of the content. As long as the template file being introduced can access the variables it needs (whether throughwithParameter passing, or inheriting through the default context), it can render dynamic content. For example, a sidebar module that displays the latest articles, as long as it finds the latest article list in the parent template and passes it toincludeThe sidebar template, and it can be displayed normally.

3. includeWill the tag affect the loading speed of the website? includeThe tag itself is part of server-side rendering, which merges all included template files into a complete HTML file before sending the page to the user.Therefore, it will not increase the number of requests loaded by the client browser.On the contrary, since the template code is more modular and concise, maintenance and optimization are also easier, in the long run, this may even help improve development efficiency and performance.