How to use the `include` tag to reuse header, footer, and other common code segments in AnQiCMS templates?
Building website templates in AnQiCMS, efficient code reuse is the key to improving development speed and maintenance efficiency.Imagine that the header (Header) and footer (Footer) of a website appear almost on every page. If the same code is written on each page, it is not only time-consuming, but also, once a modification is needed, it has to be searched and updated page by page, which is undoubtedly a huge amount of work.include.
AnQiCMS template engine is similar to Django syntax, it aims to make template creation simple and easy to understand. ByincludeLabel, you can easily extract common code segments such as headers, footers, sidebars into independent files, and then reference them where needed, greatly simplifying the structure and management of templates.
Why choose code reuse?
Efficient code reuse can bring various benefits. The first isimprove development efficiencyYou do not need to rewrite the same HTML structure, CSS links, or JavaScript references on each page.Use only once, and it can be used multiple times throughout the site.website consistencyNo matter how many pages your website has, the style and function of the common part can be kept uniform. The most important thing isSimplify maintenance workWhen the website's logo, navigation menu, or copyright information needs to be updated, you only need to modify a single public file, and all pages that reference this file will be updated synchronously, greatly reducing the risk of errors and maintenance costs.
includeBasic usage of tags
Template files in AnQiCMS are usually named with.htmlsuffix and stored in/templateIn a specific subject folder under the directory. To better organize code snippets, you can create apartial/subdirectory to store those that areincludequoted public snippets, such asheader.html/footer.htmletc.
includeThe tag syntax is very straightforward:
{% include "文件路径" %}
Here文件路径It is relative to the root directory of your template (for example/template/您的主题名/).
For example, if you want to introduce a location inindex.htmlinsidepartial/header.htmlThe header and located atpartial/footer.htmlThe footer, your code might look like this:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的网站首页</title>
<!-- 其他头部元信息和样式表 -->
</head>
<body>
{# 引入页头公共代码 #}
{% include "partial/header.html" %}
<main class="content">
<h1>欢迎来到我的AnQiCMS网站！</h1>
<p>这里是网站的主要内容区域。</p>
<!-- 更多页面特有内容 -->
</main>
{# 引入页脚公共代码 #}
{% include "partial/footer.html" %}
</body>
</html>
and in thepartial/header.htmlfile, you may have defined navigation bars, logos, and other elements:
<header class="site-header">
<div class="logo">
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
</div>
<nav class="main-nav">
<ul>
{% navList navs %}
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
</header>
partial/footer.htmlFiles may contain copyright information, filing numbers, etc.
<footer class="site-footer">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
</footer>
By this method, your main page files (such asindex.htmlIt will become very concise, focusing on the unique content of the page, while the common part is handled by each file.
Pass data to the template that is included.
Sometimes, you may want to beincludeThe template can receive some specific data to display content more flexibly. AnQiCMS'sincludetags support usingwithkeywords to pass variables.
For example, you may want the page header to display different titles based on the current page, but the page header file itself does not have the ability to retrieve the page title. In this case, you can passincludeat the time:
{% include "partial/header.html" with page_title="关于我们" %}
Inpartial/header.htmlIn Chinese, you can use thispage_titleVariable:
<header class="site-header">
<h1>{{ page_title }}</h1> {# 这里会显示“关于我们” #}
<!-- ... 其他页头内容 ... -->
</header>
You can also pass multiple variables, just separate them with spaces:
{% include "partial/header.html" with page_title="关于我们" show_search="true" %}
By default, theincludeThe template inherits all available variables from the current template. If you only want the included template to use variables passed throughwithand ignore all other inherited variables, you can useonlyKeyword:
{% include "partial/header.html" with page_title="关于我们" only %}
Handle the possibility of a non-existent template
To avoid beingincludecaused by the non-existent template file leading to page errors, you can useif_existskeywords. When the template file being referenced does not exist,if_existsIt will tell the system to ignore thisincludeThe operation, rather than throwing an error. This is very useful in some optional, non-core module references.
{# 如果存在这个文件则引入，不存在则忽略 #}
{% include "partial/sidebar.html" if_exists %}
By flexible applicationincludeTags and their various parameters, you can build a clear, easy to manage and efficient AnQiCMS website template.
Frequently Asked Questions (FAQ)
1.includeTags andextendsWhat are the differences between tags, and how should they be used together?
includeThe tag is mainly used to insert small, reusable code snippets (such as headers, footers, sidebars) into the current template, focusing on the insertion of local components. AndextendsTags are used to implement template inheritance, it defines a basic layout skeleton (base template), other templates can inherit this skeleton and only modify specific "blocks" (block)。In actual development, these two are often used together: You can useextendsto define a structure that includes the header, footer, and main content areabase.htmlskeleton, and thenbase.htmluse it insideincludeThe label introduces independent header and footer files, which can maintain the uniformity of the overall layout and realize the flexible reuse and management of local components.
2. Can IincludeUse AnQiCMS built-in tags (such as{% system %}or{% navList %}) right?
Of course, it can be.includeThe file is essentially still an AnQiCMS template file. Therefore, you can freely use all the built-in tags and variable outputs provided by AnQiCMS ({{变量名}}）and conditional judgment（{% if %}）and template syntax. This allows you to dynamically obtain system configurations, navigation lists, and other information in common code snippets, achieving high flexibility.
3. If myincludeIf the file path is wrong or the file does not exist, will the page report an error? How to avoid it?
Yes, ifincludeThe specified file path in the tag is incorrect or the file does not exist, AnQiCMS will throw an error while rendering the page, causing the page to not display normally. To avoid this situation, you can useif_existsKeyword. For example:{% include "partial/non_existent_file.html" if_exists %}So, ifnon_existent_file.htmlIf the file does not exist, the system will skip this.includeOperation will not cause an error, the page will still load normally, but the corresponding content will not be displayed. This is particularly useful for some optional, non-essential template fragments.