How to use the template inheritance feature of AnQiCMS to build a consistent page skeleton and display local content?
During the process of website construction and operation, how to efficiently manage page layout, ensure consistent visual style, and be able to flexibly adjust local content is a challenge faced by many operators.AnQiCMS provides powerful template inheritance functionality, which can help us cleverly solve these problems, realizing the structured management of website page structure and the flexible display of content.
Understanding the core concept of template inheritance
Imagine, template inheritance is like a 'blueprint' or 'master template' in architectural design.We first design a universal page skeleton, which includes the shared elements of all web pages, such as the header, footer, and navigation bar.This skeleton is called the "Base Template", which is like a general design diagram.
In this basic template, we use{% block %}Labels define some replaceable areas. These areas are like reserved spaces in buildings, such as living rooms, bedrooms, or kitchens.The child page (which inherits the basic template) can selectively fill or modify the content of these reserved spaces according to its own needs.
When a sub-template is used{% extends 'base.html' %}When a tag 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 %}Label to cover or modify the content of the corresponding block in the basic template.If the sub-template does not define a block, it will directly inherit the default content of that block from the base template.It is worth noting that,{% extends %}The label must be the first label in the child template, otherwise the template inheritance will not work properly.
Establishing the "skeleton" of the page: the practice of Base template.
In AnQiCMS, we usually create a namedbase.htmlThe file serves as the basic template for our website. This template carries the core and most general layout and elements of the website. For example, it will include HTML's<html>/<head>and<body>Label, 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 definedtitle/head_extra/contentandscriptsand many moreblock. TheseblockIt will become a 'slot' that can be freely filled or overridden by the child page.