How to organize reusable display modules in a template through `include`, `extends`, and other tags?
Secure CMS template: Use wiselyincludeandextendsCreate efficient and reusable display modules
When you use Anqi CMS to build a website, you will quickly find that it is very flexible in organizing content display.Especially when dealing with templates, the built-in Django template engine syntax allows us to build pages efficiently like stacking blocks.Today, let's talk about how to cleverly useincludeandextendsThese powerful tags are used to organize and manage reusable display modules on your website, making your templates cleaner and easier to maintain.
Understanding the foundation of Anqi CMS templates.
Before we delve deeper, let's review the basic conventions of the Anqi CMS template. Template files usually begin with.htmlwith suffix, and stored uniformly in/templateUnder the directory. The styles, JavaScript scripts, and static resources you need will be placed in/public/static/Within the directory. In the template, we use double curly braces{{ 变量 }}Output content, using single curly braces and percent signs{% 标签 %}Control logic, which is very similar to the Django template engine syntax, and it's very natural to get started with it.
includeLabel: Pluggable code snippet
Imagine the header, footer, sidebar, or some ad space on your website, this content appears on almost every page.If you copy and paste on each page, it will take a lot of time, and it will also be very麻烦 to modify in the future. At this time,includethe tag comes into play.
includeThe tag allows you to embed an independent HTML snippet (or code snippet) into the current template file.Its basic syntax is very simple, you just need to specify the path of the template file to be imported.Generally, these areincludeIncoming code snippets will be placed in a dedicated directory, such as/template/你的模板目录/partial/, which is convenient for management.
For example, if the content of your header (header) is relatively independent, you can place itpartial/header.html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{ title|default:"默认标题" }}</title>
<meta name="keywords" content="{{ keywords|default:"默认关键词" }}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
<header class="main-header">
<h1><a href="{% system with name="BaseUrl" %}">{% system with name="SiteName" %}</a></h1>
<nav>
{% navList mainNavs %}
<ul>
{% for item in mainNavs %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</header>
Then, when you need to use the header on any page, simply introduce it:
{% include "partial/header.html" %}
Sometimes, you may not be sure if a fragment file exists, or you want it to be introduced only when it exists, in which case you can addif_exists:
{% include "partial/sidebar.html" if_exists %}
In addition,includeThe tag allows you to pass specific variables to the imported snippet. For example, we want to pass the aboveheader.htmla customtitleandkeywords:
{% include "partial/header.html" with title="我的首页标题" keywords="SEO优化关键词" %}
If you only want to letincludeThe segment uses the variables you explicitly pass, not inheriting all variables from the current template, and can bewithAdd afteronly:
{% include "partial/header.html" with title="我的首页标题" keywords="SEO优化关键词" only %}
Thus,header.htmlonly recognizetitleandkeywordsthese two variables, and other variables will not be inherited.
extendsLabel: Build the overall framework of the website
If we sayincludeIt is used to insert small building blocks, thenextendsLike designing an overall blueprint or framework for your website.It allows you to define a basic template (usually referred to as a "master" or "layout template"), which includes the common structure of a website, such as navigation, header, footer, and the division of content areas, etc.
extendsLabels are always placed at the top of the template file, declaring which parent template the current template inherits from. For example, we create a parent template file namedbase.htmlwhich defines the basic structure of the page:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
{# 这个title块是可被子模板重写的区域 #}
{% block title %}
<title>默认网站标题 - {% system with name="SiteName" %}</title>
{% endblock %}
<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/global.css">
{% block head_extra %}{# 预留给子模板添加额外head内容 #}{% endblock %}
</head>
<body>
<div class="wrapper">
<header>
{# 这里通常会include页眉代码片段 #}
{% include "partial/header.html" %}
</header>
<nav class="main-nav">
{# 导航栏代码，可能也是一个include片段 #}
</nav>
<main class="content-area">
<aside class="sidebar">
{# 侧边栏内容，也可以是include片段 #}
</aside>
<article class="main-content">
{# 这个content块是页面的主体内容，子模板会在这里填充 #}
{% block content %}
<p>这是母版中定义的默认内容。</p>
{% endblock %}
</article>
</main>
<footer>
{# 这里通常会include页脚代码片段 #}
{% include "partial/footer.html" %}
</footer>
</div>
{% block body_extra %}{# 预留给子模板添加额外body内容 #}{% endblock %}
</body>
</html>
In the master template, you need to useblocktags to define areas that can be overwritten or filled by child templates. When a child template inherits this master, it can optionally overwrite theseblockThe content of the area. If the sub-template does not re