In AnQiCMS, templates are the foundation for building the website's appearance and layout.An elegantly designed template not only makes the website look professional and beautiful, but also greatly improves the efficiency of content operation and the convenience of website maintenance.extends(Template Inheritance) Tags are undoubtedly one of the key tools for optimizing page layout and content display.It can help us build a unified and flexible website structure, making content operations and frontend development easier.
UnderstandingextendsThe core of template inheritance:
extendsThe core idea of the tag is "code reuse" and "layered management".Imagine a website where each page typically has a common header, footer, navigation bar, and some general styles and script references.If each page is written independently of these contents, not only is the workload immense, but any minor change later on requires modifying each one individually, which is inefficient and prone to errors.
extendsThe appearance of the label is to solve this problem. It allows us to define a "skeleton" template (usually namedbase.htmlThis skeleton template includes the common HTML structure, header references, and footer information for all pages of the website. In the skeleton template, we useblockLabel defines some areas that can be filled in or modified by sub-templates, such as the page title, main content area, sidebar, or specific script inclusion positions.
When we need to create specific pages (such as the homepage, article detail page, category list page, etc.), we no longer need to write all the code from scratch, but only need to use this specific sub-template.{% extends 'base.html' %}Label to inherit the skeleton template. Then, based on the characteristics of the page itself, rewrite the skeleton template defined byblockArea, fill in the unique content of this page. In this way, child templates only need to focus on their core content, while the common parts are managed uniformly by the parent template.
It is particularly important to note,extendsThe label must be the first label in the sub-template file, otherwise the template inheritance mechanism will not work properly.
AnQiCMS 中extendsThe practical application and advantages of
toextendsLabels applied to AnQiCMS template development can bring many significant advantages:
Unified website structure and style:Through a common public
base.htmlWe can easily unify the overall layout, navigation, footer, and references to CSS and JavaScript of the website.This means that regardless of how many pages your website has, they will all have a coordinated and consistent look and feel.base.htmlThe website Logo, main navigation menu, website filing number (via{% system with name="SiteLogo" %}/{% navList navs %}/{% system with name="SiteIcp" %}tags) as well as common style files, to ensure they are displayed correctly on all pages.Improve development efficiency:The developer does not need to write the HTML document structure repeatedly on each page,
<head>Label content, common components, etc. They only need to focus on the unique content and features of specific pages. For example, in the template of the article detail page, you just need to rewritemain_contentBlock to display the article title, content (through){% archiveDetail with name="Title" %}/{% archiveDetail with name="Content" %}tags), without concerning how the header and footer are presented.Simplify maintenance and updates:Any modification to the public part of the website (such as changing navigation links, updating the website logo, adjusting the overall layout), only needs to
base.html骨架模板中进行一次，所有继承该模板的页面都会自动应用这些改动。This significantly reduces the maintenance costs of the website, especially for websites with a large number of pages, its value is self-evident.Optimize content management and collaboration:Front-end developers can focus on designing and maintaining template structures, while content operators can publish content through the backend system, which will automatically fill in the preset module sections.Template structure and content separation makes team collaboration more efficient.
Maintain code neatness and readability:The modular template code makes each file have a clear responsibility, easy to understand and debug.The code of the sub-template is usually smaller, only containing content directly related to the page, which improves the readability and maintainability of the code.
Practical exercise: Build an extensible page layout
Let's take a simple example to see how to use AnQiCMSextendsandblockBuild a flexible page layout.
1. Createbase.htmlSkeletal template:This file will define the overall structure of the website.
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title> {# 默认页面标题，带网站名称后缀 #}
{% endblock %}
<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 %}
{# 用于引入页面特有的CSS或Meta标签 #}
{% endblock %}
</head>
<body>
<header class="site-header">
<div class="container">
<a href="{% system with name="BaseUrl" %}" class="site-logo">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
<nav class="main-nav">
{% navList navs %}
<ul>
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</div>
</header>
<main class="site-main">
<div class="container">
{% block main_content %}
{# 这是所有页面共享的主内容区域，子模板可以重写它 #}
<p>这里是默认的主内容。</p>
{% endblock %}
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
</div>
</footer>
<script src="{% system with name="TemplateUrl" %}/js/jquery.min.js"></script>
{% block footer_scripts %}
{# 用于引入页面特有的JavaScript脚本 #}
{% endblock %}
</body>
</html>
the abovebase.htmlIn it, we define.title/head_extra/main_contentandfooter_scriptsFourblockarea.titleandmain_contentIt is usually a part that varies on each page,head_extraandfooter_scriptswhich makes it convenient to introduce unique resources for each page.
2. Createindex.htmlHome page template:The home page needs to display some featured content.
{% extends 'base.html' %} {# 继承 base.html 骨架模板 #}
{% block title %}
<title>AnQiCMS 官网 - 您的企业级内容管理专家</title> {# 重写页面标题 #}
{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/home.css"> {# 首页特有样式 #}
{% endblock %}
{% block main_content %}
<section class="hero-section">
<h1>欢迎使用 AnQiCMS</h1>
<p>高效、可定制、易扩展的内容管理解决方案。</p>
<a href="/about" class="btn btn-primary">了解更多</a>
</section>
<section class="latest-articles">
<h2>最新文章</h2>
<div class="article-list">
{% archiveList archives with moduleId="1" type="list" limit="4" %}
{% for item in archives %}
<article>
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description|truncatechars:100 }}</p>
<time>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
</article>
{% endfor %}
{% endarchiveList %}
</div>
</section>
{% endblock %}
{% block footer_scripts %}
<script src="{% system with name="TemplateUrl" %}/js/home-animations.js"></script> {# 首页特有脚本 #}
{% endblock %}
3. Createarticle_detail.htmlArticle details page template:The article details page should display the full content of the article and may include related recommendations in the sidebar.
{% extends 'base.html' %}
{% block title %}
<title>{% archiveDetail with name="Title" %} - {% tdk with name="Title" siteName=true %}</title> {# 文章详情页标题 #}
{% endblock %}
{% block main_content %}
<div class="row">
<div class="col-md-9 article-content">
<h1>{% archiveDetail with name="Title" %}</h1>
<div class="article-meta">
<span>分类: <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
<span>发布日期: {{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
<span>浏览量: {% archiveDetail with name="Views" %}</span>
</div>
<div class="article-body">
{% archiveDetail articleContent with name="Content" render=true %}{{ articleContent|safe }}
</div>
<div class="article-tags">
{% tagList tags with itemId=archive.Id limit="10" %}
{% for item in tags %}
<a href="{{ item.Link }}" class="tag">{{ item.Title }}</a>
{% endfor %}
{% endtagList %}
</div>
</div>
<aside class="col-md-3 sidebar">
<h3>相关推荐</h3>
<ul>
{% archiveList related_articles with type="related" limit="5" %}
{% for item in related_articles %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
</aside>
</div>
{% endblock %}
In these sub-templates, we go through the process of rewritingblockCustomize specific parts of the page. You can see that the amount of code in each sub-template is relatively small, focusing only on its unique content, while common headers, footers, etc. are handled separately.base.html.
How toblockDo you want to keep the parent template content?Sometimes, you may want to overwrite a certainblockwhile keeping the default content of that in the parent template.block. For example, if you want to use the default content of the{{ block.super }}in the child template.footer_scriptsAdd new scripts while not overriding existing scripts in the parent template, it can be written as:
{% block footer_scripts %}
{{ block.super }} {# 引入父模板中 footer_scripts 的内容 #}
<script src="{% system with name="TemplateUrl" %}/js/page-specific.js"></script> {# 添加自己的脚本 #}
{% endblock %}
This way, both the default script of the parent template and the specific script of the child template will be loaded, achieving the叠加 of content.
Summary
extendsLabels are an extremely powerful feature in the AnQiCMS template system, which helps us achieve a high degree of uniformity in website layout, a significant improvement in development efficiency, and an effective reduction in maintenance costs through the mechanism of template inheritance. Whether it is to build an enterprise website, a marketing site, or a personal blog, masteringextendsTags will make your website more scalable and sustainable. Embrace template inheritance to make your AnQiCMS website operation and development easier and more efficient.
Common Questions (FAQ)
Q1:extendsIs the label must be the first label in the sub-template?Yes,extendsThe label must be in the sub-template file