In AnQiCMS, efficient management of website content is inseparable from a flexible and easy-to-maintain template system.You are likely to encounter such a need when creating a template: header, footer, navigation bar, and other common elements should appear on every page of the website.If you have to rewrite this code on each page, it will not only take a lot of time and effort, but also make future modifications very difficult.It is fortunate that AnQiCMS, with its powerful features借鉴Django template engine, provides an elegant solution, making it easy to reuse these common parts.
Core foundation: Build the 'skeleton' of your website{% extends %}
Imagine that every page on your website shares a basic framework, like the fundamental structure of a house, including the foundation, load-bearing walls, and roof. In the AnQiCMS template system, this is achieved through{% extends %}Label implementation. You usually create a namedbase.html(or you can name it as needed)main.html/layout.htmlThe "template" file of (e.g.). This file defines the most basic HTML structure of the website, including all common elements of all pages, such as<html>/<head>/<body>tags, as well as headers, footers, etc.
Inbase.htmlEnglish, you need to use{% block 区域名称 %}and{% endblock %}tags to define areas that can be rewritten or filled by child templates. For example, you can define atitleblock to place the page title, aheaderA block to place navigation and Logo, as well as acontentblock to carry the unique content of each page, as well as afooterblock for footer information.
simple one.base.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 tofirst lineUse{% extends 'base.html' %}inherit from these files.base.htmlDefined skeleton. Then, you can overwritebase.htmlis defined in{% block %}the area to fill in the corresponding content.
For example, yourindex.htmlIt may be used in this way:
{% 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 %}
Pass{% 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: embedded reusable code snippet{% include %}
In addition to the overall structure of the website, many times you also need to reuse smaller code snippets, such as specific navigation menus, sidebars, comment forms, contact information modules, etc. AnQiCMS through{% include %}Labels make this process extremely simple.
According to the conventions of AnQiCMS templates, these reusable code snippets are usually stored in/templateIn the directory where you 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 fragments in a template, just simply use:
{# 引入顶部导航 #}
{% include 'partial/header_nav.html' %}
{# 引入页脚信息 #}
{% include 'partial/footer_info.html' %}
{% include %}The strength of its flexibility in passing data lies in it. If you want a contained file to display specific information, you can pass variables through keywords:withkeyword to pass variables:
{# 假设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. If the included file may not exist, you can also addif_existsto avoid errors on the page 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 elegantly ignored without interrupting the page rendering.
Advanced encapsulation: Functions in the template -{% macro %}
For more complex, repetitive UI components with logic processing, AnQiCMS also provides{% macro %}Labels, it allows you to define code blocks similar to functions in templates.Macros can accept parameters and generate different HTML content based on the parameters.This is especially useful in scenarios where similar structures need to be rendered based on different data, such as list items, card components, etc.
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 you can import this macro first and then call it in your article list page template: