How to use the template inheritance mechanism to unify and display the website page structure?
When building a website, maintaining consistency in page structure, improving development efficiency, and reducing maintenance costs is the key to website operation.AnQiCMS (AnQiCMS) with its powerful features based on the Django template engine syntax, provides us with an efficient template inheritance mechanism, allowing easy unified management and flexible display of the website page structure.
1. The core concept of template inheritance: Building the website skeleton
Imagine that your website is like a house composed of different rooms.Each room (page) has its unique functions and content, but they share the same foundation, roof, and outer wall structure.In the template mechanism of AnQiCMS, this shared structure is what we call the 'master template' or 'basic template', usually namedbase.html.
The basic template defines the most core and general layout elements of a website, such as the header (header), footer (footer), main navigation (navigation), sidebar (sidebar), and general containers for page content, etc. Inbase.htmlIn Chinese, we use{% block 块名称 %}{% endblock %}The tag is used to define an area that can be overridden by the sub-template.These blocks are like reserved spaces for houses, sub-templates can fill or modify these spaces according to their own needs.
For example, a typicalbase.htmlMay contain the following structure:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% block title %}默认网站标题 - {% system with name="SiteName" %}{% endblock %}</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/main.css">
{% block head_extra %}{% endblock %} {# 允许子模板添加额外的CSS或JS #}
</head>
<body>
<header>
{% block header %}
<!-- 网站通用头部内容，如Logo、顶部菜单 -->
<div class="logo"><img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}"></div>
{% navList mainNav with typeId="1" %} <!-- 调用主导航 -->
<!-- 导航列表循环 -->
{% endnavList %}
{% endblock %}
</header>
<main class="container">
{% block main_content %}
<aside class="sidebar">
{% block sidebar %}{% endblock %} {# 侧边栏内容 #}
</aside>
<article class="content">
{% block content %}
<!-- 默认页面内容区域 -->
{% endblock %}
</article>
{% endblock %}
</main>
<footer>
{% block footer %}
<!-- 网站通用页脚内容，如版权信息、联系方式 -->
<p>{% system with name="SiteCopyright" %}</p>
<p>{% contact with name="Address" %}</p>
{% endblock %}
</footer>
{% block body_end_scripts %}{% endblock %} {# 允许子模板添加页面底部的JS #}
</body>
</html>
In the sub-template, for example, the article list pagearchive_list.htmlWe just need to use it at the beginning of the file{% extends 'base.html' %}Tags, to inheritbase.htmlAll the structures. Next, by defining the same named{% block %}Label, we can easily overwrite or append the corresponding block content of the parent template.
`html{% extends 'base.html' %}
{% block title %}Article List - {% categoryDetail with name=“Title” %} - {% system with name=“SiteName” %}{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/archive-list.css">
{% endblock %}
{% block sidebar %}
<!-- 这里放置文章列表页特有的侧边栏内容，例如热门文章、分类导航等 -->
<h3>文章分类</h3>
{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
{% for cat in categories %}
<li><a href="{{ cat.Link }}">{{ cat.Title }}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
{% endblock %}
{% block content %}
<h1>{% categoryDetail with name="Title" %}</h1>
<div class="archive-list">
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="archive-item">
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p class="description">{{ item.Description }}</p>
<span class="date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span class="views">{{ item.Views }} 阅读</span>
</div>
{% empty %}
<p>暂无文章内容。</p>
{% endarchiveList %}
{% endarchiveList %}
</div>
{% pagination pages with show