How to implement template inheritance using the extends tag in AnqiCMS templates to unify the visual style of the website?
In website operation, maintaining a consistent visual style is the key to brand image and user experience.Imagine if every page layout on your website were different, with navigation positions changing back and forth, users would feel confused and even lose interest.extends.
AnqiCMS uses a template engine syntax similar to Django, which makes template development intuitive and efficient.extendsThe tag is the core of this mechanism, which can help you easily achieve a unified style for your website while maintaining flexibility.
Understanding the core value of template inheritance.
Why is template inheritance so important? We can understand its advantages from the following aspects:
- Unified visual styleYour website may have hundreds or even thousands of pages, each containing common areas such as headers, footers, and navigation bars.If this common area code is scattered across each template file, once you need to modify it (such as replacing the Logo, adjusting the navigation menu), you will have to modify all files one by one, which is undoubtedly a huge amount of work.By template inheritance, you can define these common elements in a "base template", which all pages inherit to ensure the consistency of the site's style.
- Enhance development efficiency: Do not rewrite the same code repeatedly. Just define it once, and it can be reused on all related pages. This greatly reduces development time, allowing you to focus more on customizing page content.
- Reduce maintenance costsWhen the website design needs to be updated, or a Bug occurs, you only need to modify one piece of code in the basic template, and all pages inheriting it will be automatically synchronized for updates, greatly simplifying maintenance work.This conforms to the design philosophy of AnqiCMS, which is 'efficient, customizable, and easy to expand'.
- Enhance content flexibility: It is important to maintain a unified style, but some special pages (such as event special pages, contact us pages) may require unique layouts or features.Template inheritance allows child templates to locally override or extend the content of parent templates without affecting the overall structure, thus achieving flexible page customization.
extendsHow do tags make magic happen?
AnqiCMS's template inheritance mechanism revolves around the 'basic template' and 'child template'.
1. Basic Template: The skeleton of the website
Firstly, you need to create a basic template file, usually namedbase.html, placed in your template root directory (for example/template/default/Below.This file is like the skeleton of your website, containing all the common structures and elements that should be present on all pages, such as the HTML header information, the header, the main navigation, and the footer.
In the base template, you need to useblocktags to define those areas that can be filled or overridden by child templates. Theseblocktags will have a unique name.
base.htmlExample:
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
{# 定义一个可被子模板覆盖的标题区域 #}
{% 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/style.css">
{# 其他公共样式或脚本 #}
</head>
<body>
<header class="main-header">
<div class="logo">
<a href="{% system with name="BaseUrl" %}"><img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}"></a>
</div>
<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>
</header>
<div class="container">
{# 定义一个主内容区域，子模板将在这里填充各自的独特内容 #}
{% block content %}
<p>这是默认内容，如果子模板不定义，就会显示这里。</p>
{% endblock %}
</div>
<footer class="main-footer">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
</footer>
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{# 其他公共脚本 #}
</body>
</html>
2. Sub-template: Filling and Customization
Next, you can create the actual page template, such asindex.html(Home page),article/detail.html(Article detail page) orpage/about.html(About us page), and let them inheritbase.html.
To implement inheritance, you need to in the sub-templatethe first lineUse{% extends 'path/to/base.html' %}tag. The path here is relative to the template root directory. For example, ifbase.htmlin the template root directory, then it is{% extends 'base.html' %}.
In the sub-template, you can overwrite (or fill in) the definitions made in the base template.blockArea. As long as you define the same-named tags in the sub-template,blockthe content of which will replace the corresponding content in the base template.blockThe content.
index.htmlExample:
{% extends 'base.html' %} {# 必须是文件中的第一行 #}
{% block title %}
<title>AnqiCMS 首页 - 快速搭建您的企业网站</title> {# 覆盖 base.html 中的 title block #}
{% endblock %}
{% block content %}
<main class="homepage-content">
<h1>欢迎来到我们的网站！</h1>
<p>这里是 AnqiCMS 首页的独特内容。我们致力于提供高效、安全的内容管理解决方案。</p>
<section class="latest-articles">
<h2>最新文章</h2>
{% archiveList archives with type="list" moduleId="1" limit="5" %}
<ul>
{% for item in archives %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a> - {{ stampToDate(item.CreatedTime, "2006-01-02") }}</li>
{% endfor %}
</ul>
{% endarchiveList %}
</section>
<section class="featured-products">
<h2>推荐产品</h2>
{% archiveList products with type="list" moduleId="2" limit="3" flag="c" %}
<div class="product-grid">
{% for item in products %}
<div class="product-item">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
<h3>{{ item.Title }}</h3>
</a>
</div>
{% endfor %}
</div>
{% endarchiveList %}
</section>
</main>
{% endblock %}
Magnificent{{ block.super }}
Sometimes, you may not want to completely replace the parent template inblockThe content, but rather add something on top of it. At this point,{{ block.super }}it comes into play. In the child template'sblockUse it to include the corresponding parent templateblockThe content.
For example, do you want to add some page-specific descriptions after the default title in the base template:
{% extends 'base.html' %}
{% block title %}
{{ block.super }} - 文章详情
{% endblock %}
{# ... 其他内容 ... #}
In this way, the final<title>The tag will include the title of the parent template and “- Article Details”.
Little tricks in practice
- Reasonable division of blocks: In design
base.htmlDon't put all the content in oneblockHere. It should be divided according to logical functions (such asblock header_nav/block sidebar/block main_content/block scriptsetc.) for detailed division. In this way, the sub-template can be customized more accurately for specific parts - Make good use of
includeTag: For some that are in multipleblockOr the "code snippet" that is repeatedly used in different sub-templates (such as a user login form, a social sharing button group), you can use{% include "partial/login_form.html" %}Introducing in this way. This can further improve the reusability of the code. AnqiCMS template system also perfectly supports this nesting. - Clear block name: Give
blockName a tag with a meaningful name that can help you quickly locate and understand the role of each block in a complex template structure. - Static Resource Management: AnqiCMS约定模板的样式、JS、images等静态资源存放在
/public/static/目录。在模板中引用时，可以使用{% system with name="TemplateUrl" %}Label to get the static file address of the current template, ensure the path is correct and flexible.
Achieve the perfect combination of unified style and flexible customization.
ByextendsTags andblockMechanism, you can easily implement it in AnqiCMS:
- **Consistent header across the entire site