How to efficiently manage page layout, ensure consistent visual style, and flexibly adjust local content during the process of website construction and operation is a challenge faced by many operators.AnQiCMS provides powerful template inheritance functionality, which can help us cleverly solve these problems, and achieve structured management of website page structures and flexible display of content.
Understanding the core concept of template inheritance
Imagine, template inheritance is like the 'blueprint' or 'master template' in architectural design.We first design a universal page skeleton, which includes all shared elements of the website pages, such as header, footer, navigation bar, etc.This skeleton is called 'Base Template', which is like a general design map.
In this basic template, we use{% block %}Labels to define some replaceable areas.These areas are like reserved spaces in buildings, such as living rooms, bedrooms, or kitchens.The sub-page (which inherits the basic template) can selectively fill in or modify the content of these reserved spaces according to its own needs.
When a sub-template is used{% extends 'base.html' %}When a label declaration inherits from a base template, it gains all the layout and structure of the base template. The child template can then define the same-named{% block %}Tag to overlay or modify the content of the corresponding block in the base template.If the child template does not define a certain block, it will directly use the default content of that block in the base template.{% extends %}The tag must be the first tag in the child template; otherwise, template inheritance will not work properly.
Establishing the page “skeleton”: Practice of the Base template
In AnQiCMS, we usually create a namebase.htmlThe file is our website's basic template. This template carries the most core and most general layout and elements of the website. For example, it will include HTML's<html>/<head>and<body>Tags, as well as the main area division of the page.
a typicalbase.htmlIt may be organized like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% block title %}
<title>默认网站标题</title> <!-- 子页面可重写此块，不重写则使用默认 -->
{% endblock %}
{% comment %} 这里可以放置其他全局的meta标签、CSS链接 {% endcomment %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/global.css">
{% block head_extra %}{% endblock %} {# 预留给子页面添加额外头部内容 #}
</head>
<body>
<div class="header">
{% comment %} 通常这里会包含网站Logo、主导航等固定内容 {% endcomment %}
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
{% navList navs %}
<ul>
{%- for item in navs %}
<li><a href="{{ item.Link }}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% endnavList %}
</div>
<div class="main-content-wrapper">
<div class="sidebar">
{% include 'partial/aside.html' %} {# 引入侧边栏局部片段 #}
</div>
<div class="main-area">
{% block content %}
<h4>这里是主内容区的默认占位符</h4>
{% endblock %}
</div>
</div>
<div class="footer">
{% comment %} 通常这里会包含版权信息、备案号、友情链接等 {% endcomment %}
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
{% linkList friendLinks %}
{% if friendLinks %}
<span>友情链接：</span>
{% for item in friendLinks %}
<a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a>
{% endfor %}
{% endif %}
{% endlinkList %}
</div>
{% block scripts %}{% endblock %} {# 预留给子页面添加JS脚本 #}
</body>
</html>
in thisbase.htmlIn it, we define.title/head_extra/contentandscriptsmultipleblock. TheseblockIt will become a "slot" that can be freely filled or overridden by the child page.