How to implement page skeleton reuse through inheritance in AnQiCMS templates?
In website construction and operation, we often face a challenge: how to ensure the consistency of the overall style of the website while being able to flexibly modify the specific content of each page, and at the same time, take into account the development efficiency and the convenience of later maintenance?AnQiCMS provides a powerful and intuitive template inheritance mechanism, which is the core of solving these problems.It's like creating a "master template" for your website, allowing you to easily reuse common structures and focus on content creation.
Understand the core principle of template inheritance
In simple terms, the template inheritance feature of AnQiCMS allows us to define a basic page layout, which we call a 'page skeleton' or 'parent template', and it contains the common structural elements of all web pages, such as the header, footer, navigation bar, sidebar, and so on. In this skeleton, we will use{% block ... %}Label some 'variable areas'. The child template then inherits{% extends '父模板路径' %}this skeleton and can use the same name according to its own needs.{% block ... %}Label to fill or overwrite the reserved area in the parent template. The areas not overwritten by child templates will automatically follow the content of the parent template.
This mechanism is similar to the "slide master" in presentation software: the master defines the overall layout and design, while each slide fills in the specific content.The benefits of doing so are obvious: the common elements of the website are kept uniform, while the unique content of the page can be freely customized.
Build your page skeleton: the design of the parent template.
To take advantage of template inheritance, you first need to create a basic parent template, usually namedbase.htmland place it in the root directory of the template directory. Thisbase.htmlWill carry the basic HTML structure of your website, for example<!DOCTYPE html>/<html>/<head>and<body>.
Inbase.htmlIn which, you can layout general elements:
- Header navigation area: Typically includes Logo, main navigation, search box, etc.
- Page Main Layout: For example, left sidebar, right content area, etc.
- Footer Information: Copyright statement, filing number, friend links, etc.
You need to use these fixed structures in{% block ... %}Define those areas that may change on different pages. For example, you can define atitleblock for the page title, acontentblock for the main content of the page, orstyles/scriptsblocks for introducing special styles or scripts for the page.
”`twig {# template/base.html #} <!DOCTYPE html>
<meta charset="UTF-8">
{# 页面标题，子模板可重写 #}
{% block title %}<title>我的网站</title>{% endblock %}
{# 额外meta信息，子模板可重写 #}
{% block meta %}{% endblock %}
<link rel="stylesheet" href="/public/static/css/common.css">
{# 页面特有样式，子模板可重写 #}
{% block styles %}{% endblock %}