How to implement page layout inheritance and rewriting using the `extends` tag in AnQiCMS templates?
When building a website, maintaining a unified page style, improving development efficiency, and reducing maintenance costs are goals pursued by every website operator. AnQiCMS (AnQiCMS) is well-versed in this, and its template system design draws on the excellent ideas of the Django template engine, among whichextendsTags are one of the core functions to achieve this goal.
The core concept of template inheritance
Imagine that you are designing a series of posters. Each poster has a common brand logo, top title, and bottom contact information, but the promotional content in the middle is different.If you had to redraw all these repeated elements from scratch every time you make a poster, it would take a lot of time and effort.The template inheritance is what solves this problem.
In AnQiCMS, template inheritance allows you to define a basic 'parent template' (usually calledbase.htmlIt includes the HTML structure, style references, JavaScript references, and fixed page areas (such as headers, footers, sidebars, etc.) shared by all pages of your website. You can also use the parent template toblockLabel defines some 'fillable' areas.
And the child template inherits this parent template and selectively 'overwrites' or 'fills' these according to the specific needs of its own page.blockThe area. If the sub-template does not overwrite someblockIt will automatically use the default content defined in the parent template.This mechanism allows you to centrally manage the overall layout and style of the website, while also giving each page the freedom to flexibly customize its content.
extendsUsage method of the tag
In the AnQiCMS template system, useextendsTo declare a sub-template inherits from which parent template is very simple. You just need to write in the first line of the sub-template file:
{% extends 'path/to/your/base.html' %}
For example, if your basic layout file is in/template/default/base.htmlThen on other pages (such as article detail pages)article/detail.htmlAt the beginning:
{% extends 'base.html' %}
Herebase.htmlIt refers to the current active template directory underbase.htmlfile.
Then, in the parent template (base.html) you will see something similar to thisblockLabel definition:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
{% block title %}<title>我的AnQiCMS网站</title>{% endblock %}
{% block meta_description %}<meta name="description" content="AnQiCMS官方网站">{% endblock %}
{% block meta_keywords %}<meta name="keywords" content="AnQiCMS, Go CMS">{% endblock %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
{# 引入头部脚本，如果存在 #}
{% include "partial/head_scripts.html" if_exists %}
</head>
<body>
<header>{% include "partial/header.html" %}</header>
<nav>{% include "partial/nav.html" %}</nav>
<div class="main-content">
{% block content %}
<!-- 这是父模板中的默认内容，如果子模板不重写，则显示此内容 -->
<p>欢迎来到我们的网站！</p>
{% endblock %}
</div>
<footer>{% include "partial/footer.html" %}</footer>
{# 引入底部脚本，如果存在 #}
{% include "partial/body_scripts.html" if_exists %}
</body>
</html>
In the parent template, we definedtitle/meta_description/meta_keywordsandcontentand many moreblock. TheseblockThe content inside the label is the default value, and the child template can optionally overwrite them. At the same time, likeheader/nav/footerThese parts that are consistent on all pages can be directly written in the parent template or throughincludetag to introduce smaller code snippets.
rewritingblockto customize page content
Now, let's assume we want to create the article detail page for AnQiCMS (article/detail.html) Create content. We only need to focus on the unique part of the article itself, and do not need to rewrite the entire HTML structure of the page.
Inarticle/detail.htmlIn it, we rewrite the parent template as follows.block:
{% extends 'base.html' %}
{% block title %}
{# 使用AnQiCMS的archiveDetail标签获取文章标题，并拼接网站名称 #}
<title>{% archiveDetail with name="Title" %} - {% system with name="SiteName" %}</title>
{% endblock %}
{% block meta_description %}
{# 获取文章描述作为页面元描述 #}
<meta name="description" content="{% archiveDetail with name="Description" %}">
{% endblock %}
{% block meta_keywords %}
{# 获取文章关键词作为页面元关键词 #}
<meta name="keywords" content="{% archiveDetail with name="Keywords" %}">
{% endblock %}
{% block content %}
<article class="article-detail">
<h1>{% archiveDetail with name="Title" %}</h1>
<div class="article-meta">
<span>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{% archiveDetail with name="Views" %}</span>
</div>
<div class="article-body">
{# 获取文章内容，并使用safe过滤器防止HTML转义 #}
{%- archiveDetail articleContent with name="Content" %}
{{articleContent|safe}}
</div>
</article>
{% endblock %}
By this means,article/detail.htmlIt contains only its unique content (article title, metadata, article body), while the overall layout, common header and footer of the page are automatically inherited frombase.html. You do not need to paste these common elements on each page, which greatly improves development and maintenance efficiency.
The secret to unified style and efficient layout
extendsThe core value of tags lies in:
- Unified visual styleAll pages are based on the same parent template structure, ensuring consistency in the overall layout and common elements (such as navigation, footer), enhancing the brand image.
- The leap in development efficiency: Developers can focus on the unique content of specific pages without having to rewrite a large amount of common HTML code, significantly speeding up the development speed.
- convenient maintenance experienceWhen you need to adjust the global layout or common components of the website, just modify
base.htmlor among themincludeThe common segment, all pages inheriting it will automatically update, avoiding the trouble of repeated modifications in multiple files. - Flexible content customization:
blockThe mechanism allows child templates to rewrite content as needed, ensuring a unified style while providing sufficient flexibility to handle special requirements of different pages.
This template inheritance mechanism is a key component of AnQiCMS for efficient and easy management of content. It makes the construction and operation of the website more structured.