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

When building and managing websites, improving efficiency and maintaining code cleanliness is the goal that every operator pursues. AnQiCMS, as an efficient content management system, provides powerful template features, whereincludeLabels are the tools to achieve this goal.It allows us to abstract out repetitive code snippets in a website, forming independent modules, and then referencing them where needed, which greatly optimizes the template structure and subsequent maintenance work.

UnderstandingincludeLabel: The Foundation of Modular Websites

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

Why chooseincludeWhat are the three core advantages of labels?

UseincludeLabels are not just convenient 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.Encapsulate the general module (such as website header navigation, footer copyright information, and unified display styles of article list items) into independent template files, and you do not need to write the same code repeatedly on multiple pages.This means that the development workload is significantly reduced, avoiding unnecessary repetitive labor.

2. Optimize template structure, enhance readability:When a page's template file becomes long and complex, it becomes very difficult to locate and understand the code for specific areas. ThroughincludeYou can break down 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 and reduce error rates:The website content and features often need to be updated.If the code of a general module is scattered across multiple template files, any modification requires individual operations, which increases the maintenance cost and the risk of introducing errors.includeAfter, you just need to modify one included file, and all the pages referencing it will be updated automatically, greatly simplifying the maintenance process and ensuring consistency of modifications.

How to use in Anqi CMS templateincludeTags?

Auto CMS template files are usually used.htmlas suffixes, and stored uniformly in/templatethe directory. For public code segmentsincludesuggested to be placed in/templatethe directory.partial/the subdirectory, for examplepartial/header.html/partial/footer.htmlEnglish, this is a good organizational habit.

Basic introduction method

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

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

This is,header.htmlandfooter.htmlThe content will be**inserted into the corresponding position of the current template file.

Pass variables: Make 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.withPass variables to the included template:

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

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

{# 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 useonlyparameters to limit the visibility of the variable to only throughwithParameters explicitly passed variable:

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

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

Gracefully handle non-existent files:if_exists

If you are not sure about a variable beingincludeThe template file exists, but you don't want the page to report an error because the file does not exist, you can useif_existsparameter. In this way, if the file does not exist,includeThe statement will be silently ignored without interrupting the page rendering:

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

Concluding remarks

includeLabels are a basic and powerful tool in the development of AnQi CMS templates.Through it, we can easily achieve the modularization and structurization of templates, effectively improve development efficiency, reduce maintenance costs, and ultimately provide website users with a more stable and faster access experience.includeThe tag will make your website operation twice as effective.

Common Questions (FAQ)

1. includeTags andextendsWhat is the difference between tags? extendsLabels are mainly used for template inheritance, it defines a basic layout (skeleton), other templates can be based on this skeleton to fill in or override specific content blocks (block）。而includeLabels are used to insert a small code snippet (such as headers, footers) at a specified location in any template file. In simple terms,extendsis 'I build based on you'.includeIs 'I insert you here'.

2. Can I useincludea module to dynamically generate content with tags?Of course you can.includeThe tag itself does not limit the dynamics of the content. As long as the template file introduced can access the variables it needs (whether throughwithParameters passed, or inherited through the default context), it can render dynamic content. For example, a sidebar module that displays the latest articles, as long as it can query the latest article list in the parent template and pass it toincludeThe sidebar template, and it will 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.In contrast, due to the more modular and concise template code, maintenance and optimization are also easier, and in the long run, this may even help to improve development efficiency and performance.