How to reuse the code for displaying the common header or footer module in AnQiCMS templates through the `include` tag?
In AnQiCMS template design, efficient code reuse is the key to improving development efficiency and maintenance convenience.Faced with common elements on websites, such as headers, footers, navigation bars, sidebars, etc., if each page is rewritten repeatedly, it not only takes time and effort, but also, once a modification is needed later, it will affect the whole body.includeTags are the tools to achieve this goal.
AnQiCMS's template system adopts syntax similar to Django's template engine, which makes the organization and writing of template files have good structure and readability. Typically, template files are written in.htmlAs a suffix, store uniformly in/templateUnder the directory. To better manage and reuse code snippets that appear on multiple pages, a common and recommended practice is to classify and store them in the template directory under.partial/in the subdirectory.For example, the public header (header), footer, sidebar (sidebar), or independent small components (such as ad spaces, contact information blocks) etc., are all very suitable for extracting and reusing parts.
Skillfully useincludeTag, to modularize code
includeThe core function of the tag is to embed the content of one template file into another, thereby avoiding repeated code writing.This is like a set of building blocks, breaking down the website into individual, interchangeable modules.
Basic usage: Introduce public code snippets
The simplestincludeThe usage is intuitive and clear, just specify the path of the template file to be included. For example, to include the common header of the website at the top of each page, you can include in the main template file (such asindex.html/detail.htmlUse it in this way:
{% include "partial/header.html" %}
Similarly, the footer of a website usually contains copyright information, friend links, and can also be introduced in the same way:
{% include "partial/footer.html" %}
In this way, once it is necessary to adjust the content of the website header or footer, it only needs to be modifiedpartial/header.htmlorpartial/footer.htmlThese two files, all the pages that refer to them will be updated synchronously, greatly simplifying the maintenance work.
Parametricinclude: Makes the module more flexible
In practice, the public modules introduced may need to display different content according to the context of the current page.includeTags providedwithParameters allow you to pass local variables to the imported template, making it more adaptable.
Assuming yourheader.htmlYou need to display the title of the current page or display different keywords according to different pages. You can pass variables in this way when you import it:
{% include "partial/header.html" with pageTitle="文章详情" keywords="AnQiCMS, 模板技巧" %}
Inpartial/header.htmlInternally, these variables can be accessed and used like ordinary variables:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{ pageTitle }} - {% system with name="SiteName" %}</title>
<meta name="keywords" content="{{ keywords }}">
{# 其他头部内容，例如引入导航列表 #}
{% navList navs %}
<ul>
{% for item in navs %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{% endnavList %}
</head>
<body>
{# 网站Logo #}
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
<!-- ... -->
</body>
</html>
Limit the scope of variables:onlyParameter
By default,includeThe template introduced will inherit all the context variables of the current main template.But sometimes, you may only want to pass a few specific variables to avoid unnecessary variable pollution or to improve the clarity of the template.onlyParameters can come into play:
{% include "partial/header.html" with pageTitle="文章详情" keywords="AnQiCMS, 模板技巧" only %}
Useonlyafter,partial/header.htmlAccess will be restricted topageTitleandkeywordsthese two variables, as well as,header.htmlAny variable defined internally. This helps maintain the independence and maintainability of the template.
Graceful error handling:if_existsParameter
In some cases, the module you are importing may be optional, or you may be unsure if the file exists. If you directlyincludeA non-existent file, AnQiCMS will report an error. To avoid this situation, you can useif_existsparameters:
{% include "partial/optional_sidebar.html" if_exists %}
Ifpartial/optional_sidebar.htmlIt will be imported normally if it exists; if it does not exist,includeThe tag will be ignored, the page will not be error, thus ensuring the normal operation of the website.
Practice makes perfect: Build modular websites.
ByincludeLabel, the website template structure will become clear and organized.
Scenario one: Unified website header (partial/header.html)
Inpartial/header.htmlIn Chinese, you can define the website's logo, main navigation, and SEO-related TDK (Title, Description, Keywords) information. Utilize the built-in features of AnQiCMS.systemandtdkTags, easily get these global configurations.
{# partial/header.html 内容示例 #}
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
{# 引入导航 #}
{% navList mainNav %}
<nav class="main-navigation">
<ul>
{% for navItem in mainNav %}
<li {% if navItem.IsCurrent %}class="active"{% endif %}>
<a href="{{ navItem.Link }}">{{ navItem.Title }}</a>
</li>
{% endfor %}
</ul>
</nav>
{% endnavList %}
</head>
<body>
<header class="site-header">
<a href="{% system with name="BaseUrl" %}" class="logo">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
</header>
<main>
{# 页面主要内容会在这里 #}
Then simply include it on each page that needs this header:
{% include "partial/header.html" %}
Scenario two: Reuse the website footer (partial/footer.html)
The website footer usually contains copyright information, contact information, friend links, and other content. Inpartial/footer.htmlyou can also combine it withsystem/contactandlinkListtags to build. In
{# partial/footer.html 内容示例 #}
</main>
<footer class="site-footer">
<p>{% system with name="SiteCopyright" %}</p>
<p>联系我们：{% contact with name="Cellphone" %} | {% contact with name="Email" %}</p>
<div class="friend-links">
{% linkList friendLinks %}
<ul>
{% for link in friendLinks %}
<li><a href="{{ link.Link }}" {% if link.Nofollow == 1 %}rel="nofollow"{% endif %} target="_blank">{{ link.Title }}</a></li>
{% endfor %}
</ul>
{% endlinkList %}
</div>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
</footer>
</body>
</html>
all pages, introduce it at the end of the page content:
{% include "partial/footer.html" %}
includeThe value brought by tags compared with other reuse mechanisms
ByincludeTags, you can significantly:
- Improve development efficiency:Avoid rewriting code, focus on core business logic.
- Simplify maintenance:Unified modification of the public module, achieving the effect of 'one modification, effective throughout the site'.
- Enhanced readability and organization:The template structure is clearer, each file has a single responsibility, easy to understand and manage.
- Promote teamwork:Different developers can independently develop and maintain the modules they are responsible for, reducing code conflicts.
It is worth mentioning that AnQiCMS also provides other powerful template reuse mechanisms, such asextends(Template inheritance) andmacro(macro function).extendsTags are usually used to define the overall layout of the page or “bone