When building a website, maintaining consistent page structure, improving development efficiency, and reducing maintenance costs are key to website operation.AnQiCMS (AnQiCMS) boasts powerful features based on the Django template engine syntax, providing us with an efficient template inheritance mechanism that can easily realize the unified management and flexible display of website page structures.
1. The core concept of template inheritance: Building the website skeleton
Imagine that your website is like a house made up of different rooms.Each room (page) has its unique functions and content, but they share the same foundation, roof, and exterior wall structure.base.html.
The basic template defines the most core and general layout elements of the website, such as the header, footer, main navigation, sidebar, and general containers for page content, etc. Inbase.htmlIn, we use{% block 块名称 %}{% endblock %}The tag defines an area that can be overridden by child templates.These blocks are like reserved spaces for houses, and sub-templates can fill or modify these spaces according to their own needs.
For example, a typicalbase.htmlmay include 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 only need to use the{% extends 'base.html' %}tag at the beginning of the file, and it can inheritbase.htmlauto of all structures. Then, by defining the same name,{% block %}tag, we can easily override or append the corresponding block content in 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