In AnQiCMS, efficient website content management is inseparable from a flexible and easy-to-maintain template system.When you are creating a template, you are likely to encounter such a requirement: header, footer, navigation bar, and other common elements need to appear on every page of the website.If writing the same code for each page, it is not only time-consuming and labor-intensive, but also modifying it in the future is a slight movement and the whole body is affected.Luckyly, AnQiCMS takes advantage of the powerful features of the Django template engine and provides an elegant solution, making it easy to reuse these common parts.
The core cornerstone: build the 'skeleton' of your website——{% extends %}
Imagine that every page of your website shares a basic framework, like the basic structure of a house, including the foundation, load-bearing walls, and roof. In the AnQiCMS template system, this is achieved through{% extends %}Tags implemented. You usually create a named onebase.html(Or you can name it as needed)main.html/layout.htmlThe "master" file. This file defines the basic HTML structure of the website, including common elements for all pages, such as<html>/<head>/<body>tags, as well as headers and footers.
Inbase.htmlIn Chinese, you need to use{% block 区域名称 %}and{% endblock %}tags to define areas that can be rewritten or filled by sub-templates. For example, you can define atitleblock to place the title of the page, aheaderA block to place navigation and Logo, as well as onecontentA block to carry the unique content of each page, and one morefooterA block for footer information.
A simple onebase.htmlmight look like this:
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% tdk with name="Title" siteName=true %}{% 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/style.css">
{% block head_extra %}{% endblock %}
</head>
<body>
<header>{% block header %}{% endblock %}</header>
<main>{% block content %}{% endblock %}</main>
<footer>{% block footer %}{% endblock %}</footer>
<script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
{% block body_extra %}{% endblock %}
</body>
</html>
Next, when you create specific page templates (such asindex.htmlUsed for the homepage,article_detail.htmlused for article detail pages), you just need tothe first lineUse{% extends 'base.html' %}inheritbase.htmlthe defined skeleton. Then, you can rewritebase.htmldefined in{% block %}Fill in the corresponding content.
For example, yourindex.htmlMay be used like this:
{% extends 'base.html' %}
{% block title %}首页 - {% tdk with name="Title" %}{% endblock %}
{% block header %}
{# 首页的头部内容，可能会引入一个单独的导航文件 #}
{% include 'partial/header_nav.html' %}
{% endblock %}
{% block content %}
<h1>欢迎来到我们的网站</h1>
<p>这里是网站的最新内容...</p>
{# 其他首页特有的内容 #}
{% endblock %}
{% block footer %}
{# 首页的页脚，也可能引入公共页脚 #}
{% include 'partial/footer_info.html' %}
{% endblock %}
By{% extends %}You only need to maintain a basic layout file, all page structure updates can be completed here, which greatly improves development and maintenance efficiency.
Fine-grained splitting: Embeddable reusable code snippet -{% include %}
In addition to the overall structure of the website, you often need to reuse smaller code snippets, such as specific navigation menus, sidebars, comment forms, contact information modules, etc. AnQiCMS through{% include %}Tags make this process extremely simple.
According to the AnQiCMS template production conventions, these reusable code snippets are usually stored in/templateIn the directory where you have created the template folderpartial/in the subdirectory. For example, you can havepartial/header_nav.htmla file to specifically define the top navigation of the website, orpartial/footer_info.htmlto include copyright and contact information.
When you need to embed these snippets in a template, just use it simply:
{# 引入顶部导航 #}
{% include 'partial/header_nav.html' %}
{# 引入页脚信息 #}
{% include 'partial/footer_info.html' %}
{% include %}The strength lies in its ability to flexibly pass data. If you want a contained file to display specific information, you can pass variables throughwithkeywords:
{# 假设header_nav.html需要一个当前页面名称变量 #}
{% include 'partial/header_nav.html' with current_page_name="关于我们" %}
Inpartial/header_nav.htmlin, you can use{{ current_page_name }}Get and display this value. You can also add if the included file may not exist,if_existsto avoid the page from crashing due to missing files:
{% include 'partial/ad_banner.html' if_exists %}
so ifad_banner.htmlIt exists, it will be introduced; if it does not exist, it will be ignored gracefully without interrupting the page rendering.
Advanced encapsulation: Functions in templates ——{% macro %}
For more complex, repetitive UI components with logical processing, AnQiCMS also provides{% macro %}A tag that allows you to define a code block similar to a function in a template.Macros can accept parameters and generate different HTML content based on the parameters.This is especially useful in scenarios where list items, card components, and other similar structures need to be rendered with different data.
For example, you can define a macro to render each item in the article list:
{# 定义在 partial/archive_macros.html #}
{% macro render_archive_item(archive) %}
<li class="archive-item">
<a href="{{ archive.Link }}">
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}">
<h3>{{ archive.Title }}</h3>
<p>{{ archive.Description|truncatechars:100 }}</p>
<span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
</a>
</li>
{% endmacro %}
Then in your article list page template, you can first import this macro and then call it:
”`html {% extends ‘base.html’ %} {% import ‘partial/archive_macros.