When building a website, we often encounter such situations: the header (Header), footer (Footer), and some sidebars, navigation menus, and other components almost appear on every page.If each of these common sections of code is written repeatedly, it not only takes time and effort, but also, once a modification is needed, it must be searched and updated page by page, which is inefficient and prone to errors.includeThe tag is the core tool for realizing the modular display of public components.

includeThe role of a tag, as the name implies, is to embed an independent template file (which can be understood as a code snippet or component) into another template file.In this way, we can save the repetitive structures on the website, such as navigation bars, copyright information, side advertisement slots, and so on, as separate template files.includeTag references without copying code, greatly improves the maintainability and development efficiency of templates.

How specifically should it be usedincludeWhat about the tags

First, organize the template file properly.The AnQi CMS recommends placing public code and code snippets in a specific directory.partialfolder, place all reusable components such asheader.html/footer.html/sidebar.htmletc., together in it. The benefit of doing this is that the structure is clear and easy to manage.

The basic syntax for introducing public components is very concise:{% include "partial/header.html" %}This line of code will tell Anqi CMS to insert herepartial/header.htmlAll content defined in the file. When the browser accesses the page containing this line of code, it will render the page header content.

While usingincludeWhen labeling, we also need to consider some special cases. For example, if you are not sure whether a public component file exists, you can directlyincludeadd aif_existsmodifier:{% include "partial/navigation.html" if_exists %}so ifpartial/navigation.htmlThe file does not exist, the system will not report an error, but will silently ignore this part of the reference, to avoid page rendering failure due to missing files.

Further, public components often need to display different content based on the context of the current page.For example, the page header may need to display the title of the current page or different navigation items based on the user's login status.includelabel'swithKeywords come into play. ThroughwithThe keyword, we can pass to beincludepass specific variables to the template:{% include "partial/header.html" with pageTitle="产品详情页" userName="张三" %}Inpartial/header.htmlIn the template file, we can use it directly{{pageTitle}}and{{userName}}to retrieve and display these passed values.

By default, theincludeThe template inherits all variables from the parent template. But sometimes, to avoid variable conflicts or to have stricter control over the range of variables passed, you can useonlykeyword. WhenonlywithwithUsed simultaneously, it isincludeThe template will only acceptwithVariables explicitly specified in it, and will not inherit other variables from the parent template:{% include "partial/header.html" with pageTitle="新闻中心" only %}Thus,header.htmlCan only access inpageTitleand cannot access other variables that may exist in the parent template.

In a practical project,includeThe application scenarios of the tag are very extensive. In addition to the header, footer, and sidebar mentioned above, it can also be used for:

  • Navigation menu:Whether it is a top navigation, bottom navigation, or multi-level dropdown menu, it can be made into an independent component.
  • Copyright information:Unified management of the website's copyright statement, filing number, etc.
  • Universal form elements:Such as search boxes, subscription email forms, etc.
  • Breadcrumbs navigation:As an independent module for dynamically generating paths.

By using this modular development approach, the template code of the website will become cleaner and more structured, greatly reducing maintenance costs.When the website needs to be redesigned, only a few public component files need to be modified to achieve a full-site update, greatly improving work efficiency.At the same time, it also promotes collaboration among team members, where each person can focus on the development of their respective modules and then integrate them together.

Of course, when usingincludeWhen labeling, there are also some small suggestions. First, maintainpartialThe directory structure is organized, avoiding chaotic component files.Secondly, name variables reasonably and pay attention to the type and value of variables when passing them.In the end, while modularization is convenient, it is also necessary to avoid over-dividing. For code snippets that appear only once or are logically very simple, writing them directly on the page may be more efficient.

Frequently Asked Questions (FAQ)

1.includeTags andextendsWhat are the differences between tags? includeThe tag is used to insert a template file completely into a specific position in another template, it is more focused on code snippet reuse.You can imagine putting an independent small box (component) into a large box (main page).extendsTags are used for template inheritance, defining a basic skeleton template (parent template), which other templates (child templates) can inherit and rewrite specific 'blocks' (blocks) defined in the parent template.extendsFocuses more on the overall reuse and customization of the page structure. Typically, a page template willextendsstart with a basic layout, thenincludesome common components.

2. How toincludeHow to get the current page data from the incoming public component?There are two main methods. The first is the default mechanism: beingincludeThe template inherits all context variables from the parent template, so in most cases, no additional operation is required, and the common components can access the data of the current page. For example, if the parent page defines{{siteName}}, wasincludeThe header template can be used directly. The second is to usewithKeyword explicitly pass: When you want to pass specific data, or want to control the scope of variables, you can inincludeUsed in tagswithKeywords, for example:{% include "partial/header.html" with currentPage="首页" %}.header.htmlIn,{{currentPage}}you can directly use

3. If I am in the header component (partial/header.htmlWill variables defined in this context affect other page content?Generally, they will not.includeVariables defined within a template that is introduced, generally have a scope limited to the template itself. Once the template is rendered, the scope of these internal variables also ends and will not leak to the parent template or other templates that areincludein the template. But if you are modifying variables inherited from the parent template (for exampleinclude), this change may only affect the{% set siteName = "新的站点名" %}.includeThe component is valid internally, the specific behavior depends on the implementation details of the template engine, and it is a safe practice to avoid modifying inherited variables arbitrarily within the component.